I am trying to create a navigation bar with underline effect under each element when hovering over. For some reason the hover effect does not show up and I don't know if it's my code that's wrong or the browser and I have no idea how to fix it. The problem is the ".underline_indicators" class
I am following the latest freeCodeCamp course for creating a web design system, followed the code exactly but it still did not work. Any help is much appreciated!
Here's my code snippet:
ul{
display: flex;
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.underline-indicators > * {
padding: 1rem;
border: 0;
cursor: pointer;
border-bottom: .2rem solid white;
}
.underline-indicators > *:hover,
.underline-indicators > *:focus {
border-color: black;
}
.underline-indicators > .active {
border-color: black;
} <html>
<head>
<link rel="stylesheet" href="underline.css">
</head>
<body>
<nav>
<ul class="underline-indicators">
<li class="active"><a href="#">00</a></li>
<li><a href="#">01</a></li>
<li><a href="#">02</a></li>
</ul>
</nav>
</body>
</html>
With the code you gave us it doesn't work. But if you add <!DOCTYPE html> as Doctype declaration before the <html> tag, it works fine. The code snippet works, because in the iframe the Doctype is added. I guess, the CSS can't validate without it.