Guys, can you explain why the link animation does not work? It seems to do everything by the mind.

.header ul{ max-width: 900px; margin: 0 auto; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; li { padding: 5% 2%; a { font-size: 0.875em; font-family: 'Roboto', sans-serif; text-decoration: none; text-transform: uppercase; color: aliceblue; } a:before, a:after { left: 0; top: 0; width: 100%; height: 100%; border-style: solid; border-color: #4bcaff;; } a:before { border-width: 2px 0 2px 0; transform: scaleX(0); } a:after { border-width: 0 2px 0 2px; transform: scaleY(0); } a:hover:before, a:hover:after { transform: scale(1, 1); color: #4bcaff; } } } 
  <div class="header"> <li><a href="#" class="effect-6">Home</a></li> <li><a href="#" class="effect-6">Services</a></li> <li><a href="#" class="effect-6">Portfolio</a></li> <li><a href="#" class="effect-6">Features</a></li> <li><a href="#" class="effect-6">Contact</a></li> </ul> </div>

  • And where did you get the idea that in CSS to enclose the description of the properties of some elements in the description of others is “by mind”? - Cheg
  • You have selectors nested inside each other. You can not do it this way. - mJeevas
  • Forgot to compile your SASS? - br3t
  • ul opening in html lost - br3t
  • Sometimes it helps to pray - mJeevas

1 answer 1

  .header ul{ max-width: 900px; margin: 0 auto; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; li { padding: 5% 2%; a { font-size: 0.875em; font-family: 'Roboto', sans-serif; text-decoration: none; text-transform: uppercase; color: aliceblue; display: inline-block; position: relative; } a:before, a:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-style: solid; border-color: #4bcaff;; } a:before { border-width: 2px 0 2px 0; transform: scaleX(0); } a:after { border-width: 0 2px 0 2px; transform: scaleY(0); } a:hover:before, a:hover:after { transform: scale(1, 1); color: #4bcaff; } } } 
  <div class="header"> <ul> <li><a href="#" class="effect-6">Home</a></li> <li><a href="#" class="effect-6">Services</a></li> <li><a href="#" class="effect-6">Portfolio</a></li> <li><a href="#" class="effect-6">Features</a></li> <li><a href="#" class="effect-6">Contact</a></li> </ul> </div>

If you use SCSS, then everything will work, although this is a very wild code ... If, after all, you do not use SCSS, then so:

 .header ul{ max-width: 900px; margin: 0 auto; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; } li { padding: 5% 2%; } a { font-size: 0.875em; font-family: 'Roboto', sans-serif; text-decoration: none; text-transform: uppercase; color: aliceblue; display: inline-block;position: relative; } a:before, a:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-style: solid; border-color: #4bcaff; } a:before { border-width: 2px 0 2px 0; transform: scaleX(0); } a:after { border-width: 0 2px 0 2px; transform: scaleY(0); } a:hover:before, a:hover:after { transform: scale(1, 1); color: #4bcaff; } 
 <div class="header"> <ul> <li><a href="#" class="effect-6">Home</a></li> <li><a href="#" class="effect-6">Services</a></li> <li><a href="#" class="effect-6">Portfolio</a></li> <li><a href="#" class="effect-6">Features</a></li> <li><a href="#" class="effect-6">Contact</a></li> </ul> </div>