Recently, I came across this intriguing underline animation:
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
body,html {
margin: 0;
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #000;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
@media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
My next step is to integrate this code into my NavItem component. The animation works perfectly, but it seems to be applied to the entire Navbar instead of just the NavItem component. You can see the CSS for NavItem and the app image here.
As a new member, I'm still learning the best practices for showcasing a website when it's on my localhost. Also, please forgive any mistakes in my English. :)