如何对 CSS 中的每个直接子级分别应用 hover 效果？

Question

I am trying to create a tab bar with a hover effects on its direct children, therefore i have the following code with the intent of applying an effect on each element inside the list individually, but idoesn't work.

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 apply this effect and if yes what is the optimal way to do it?

Providing that when i replace *:hover with li:hover it works just fine, but i want to use * so i can reuse the same style on different parts of my code.

Answer 1

<style>
.underline-indicators {
    list-style:none;
}

.underline-indicators li > *{
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
  color:green;
}

.underline-indicators *:hover,
.underline-indicators *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}
.underline-indicators .active {
    border-color: hsl(var(--clr-white) / 1);
}
</style>

Try This CSS CODE

Answer 2

Why you don't set a unique ID for each element that you want to put hover on it?