</body>
<div id="header">
<div class="container">
<nav>
<img src="logo.png" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
/css
.container{
padding: 10px 10%;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
position: relative;
}
nav ul li a::after{
content: '';
width: 100%;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
nav ul li a:hover::after{
width: 100%;
I am making a hover effect for the pages for my portfolio website. Everything else is working but the hovering does not. I added ul and used li as I usually do but it did not work.
2
Answers
I fixed it
Your
nav ul li a::after
haswidth:100%
change it towidth: 0%;
Note: I have changed the color of text to make it visible here, add your color to your code.
Demo