I have been working on creating a hover effect for a list of items where an underline emerges from the center. While I have done something similar in the past, there seems to be an issue preventing it from working properly this time. I have included the HTML and CSS code below, could someone assist me in identifying the problem?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
height: 10vh;
font-family: 'Josefin Sans', sans-serif;
}
.logo {
font-family: 'Abril Fatface', cursive;
font-size: 2rem;
}
.logo a {
text-decoration: none;
color: #000;
}
.nav-links {
display: flex;
width: 40%;
justify-content: space-around;
}
.nav-links li a {
text-decoration: none;
}
.nav-links li {
list-style: none;
font-size: 25px;
}
.nav-links li a::after {
content: '';
display: block;
height: 2px;
color: #1ebbd7;
margin: auto;
display: none;
transition: 0.5s;
}
.nav-links li a:hover::after {
width: 80%;
}<!--NAVBAR-->
<nav>
<div class="logo">
<a href="index.html">
<h1>The Bakery.</h1>
</a>
</div>
<ul class="nav-links">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Order</a>
</li>
<Li>
<a href="#">Recipes</a>
</Li>
</ul>
</nav>