Add a hover effect on unoredered list

Question

 body{ background: #080808; color: #fff; } #header{ width: 100%; height: 100vh; background-image: url(); background-position: center; background-size: cover; padding-bottom: 50 } .container{ padding: 10px 10% ; } nav{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .logo{ width: 140px; } nav ul li{ display: inline-block; list-style: none; margin: 10px 20px; } nav ul li a{ position: relative; text-decoration: none; color: #fff; } nav ul li a::after{ content: ""; position: absolute; bottom: -6px; left: 0; width: 0; height: 3px; background-color: red; } nav ul li a:hover::after{ width: 100%; }

 <div class="container"> <nav> <img src="" class="logo"> <ul> <li><a href="#Home"></a>Home</li> <li><a href="#About"></a>About</li> <li><a href="#Services"></a>Services</li> <li><a href="#Portfolio"></a>Portfolio</li> <li><a href="#Contact"></a>Contact</li> </ul> </nav> </div>

I want to add a hover effect to the ul li but the code seems not to work.

I think this is how it should be but the css seems not to work for some reason. Thanks anyways I also tried using the opacity tag but it still doesn't work. Edit: I have now edit the HTML Code. The problem is that the hover effect doen't appear. What I want is to make a hover effect for the ul li.

Answer 1

I think that you have to put the text inside the a tags

 body{ background: #080808; color: #fff; } #header{ width: 100%; height: 100vh; background-image: url(); background-position: center; background-size: cover; padding-bottom: 50 } .container{ padding: 10px 10% ; } nav{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .logo{ width: 140px; } nav ul li{ display: inline-block; list-style: none; margin: 10px 20px; } nav ul li a{ position: relative; text-decoration: none; color: #fff; } nav ul li a::after{ content: ""; position: absolute; bottom: -6px; left: 0; width: 0; height: 3px; background-color: red; transition-duration: 300ms; } nav ul li a:hover::after{ width: 100%; }

 <div class="container"> <nav> <ul> <li><a href="#Home">Home</a></li> <li><a href="#About">About</a></li> <li><a href="#Services">Services</a></li> <li><a href="#Portfolio">Portfolio</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> </div>