I have been attempting to create a tab bar with hover effects on its direct children, but I am facing some challenges. Below is the code snippet I have so far, which aims to apply an effect to each element inside the list individually.
HTML code :
<!-- navigation -->
<div>
<nav>
<ul class="primary-navigation underline-indicators flex">
<li class="active">
<a class="uppercase text-white letter-spacing-2" href="#"
><span>01</span>Active</a
>
</li>
<li>
<a class="uppercase text-white letter-spacing-2" href="#"
><span>02</span>Hovered</a
>
</li>
<li>
<a class="uppercase text-white letter-spacing-2" href="#"
><span>03</span>Idle</a
>
</li>
</ul>
</nav>
</div>
CSS code :
.underline-indicators > * {
padding: var(--underline-gap, 1rem) 0;
border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
}
.underline-indicators > *:hover,
.underline-indicators > *:focus {
border-color: hsl(var(--clr-white) / 0.5);
}
.underline-indicators > .active {
border-color: hsl(var(--clr-white) / 1);
}
Is it possible to achieve this effect in the desired way? If so, what would be the optimal approach?
Although replacing *:hover with li:hover works perfectly fine, I still want to use * for reusability across different parts of my code.