Which selector should i use?

HTML-CSS
1

Hello, i designed the header however it doesn’t work as expected. The problem is with pseudo element (call it indicator - the black bar over the list item) and hover state. I want the indicator to be expanded on hover on “.list-item” but it expands every other indicator but not desired. I think it’s about the selector. Please take a look at codepen.
https://codepen.io/qurczax/pen/YzWgmZg

2

Tilde (~) selects following siblings, i.e. your selector selects all .list-item elements following hovered.
Correct selector would be:

&:hover  {
  &::before {
    height: 15px;
  }
}
3

I was inspecting and was gonna give every .list-item different class :smiley: Thanks for info.