Hover effect does not activate other element

Question

for some reason

#item1:hover ~ #item1::before{ display: block; }

does not actually display the element I wanted in block when I hover on #item 1.

Here’s the code and thanks in advance! https://jsfiddle.net/dyus45w0/

Answer 1

Changes CSS

* {
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    justify-content: space-between;
    background: #2a2e33;
    align-items: center;
    width: 100%;
    height: 60px;
    position: relative;
}

#logo {
    color: white;
    margin-left: 10px;
    position: relative;
}


#list {
    display: flex;
    height: 100%;
    list-style: none;
    color: white;
}

li {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    max-height: 100%;
    position: relative;
}


li:hover {
    background: #1e2329;
}


li::before {
    content: "";
    background-color: chocolate;
    width: 100%;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

li:hover::before {
    display: block;
}

  <header>
    <h1 id="logo">LOGO</h1>
    <ul id="list">
      <li id="item1">HOME</li>
      <li id="item2">ABOUT US</li>
      <li id="item3">CONTACT</li>
      <li id="item4">BLOG</li>
    </ul>
</header>

Answer 2

The symbol ~ is the general sibling combinator. From MDN docs:

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

Your element #item1 does not have a sibling #item1, because it is that element itself. In other words, an element can't follow itself.

This means that your CSS selector cannot match any element, because no two elements can have the same id.