What selector should I use for an element, that depends on hover behavior of a pseudo-element?

Question

I made a burger-menu with a pseudo-element. Now I need to show a menu, if a pseudo-element is hover. I can choose it this way :.header:hover:before But I can't force the menu to depends on it.

It's a structure of html:

<header class="header">
    <a href="#"><img src="img/logo.svg" alt="logo" class="logo logo_header"></a>
    <nav class="menu menu_header">It's a menu</nav>
    <div class="contacts-header">Some contacts here</div>
</header>

It's CSS:

.header:before {
        content: '';
        display: block;
        width: 40px;
        height: 30px;
        background-image: url("../img/icon-burger-menu.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
.menu {
        display: none;
    }

    .header:hover:before **???** {
        display: block;
    }

Is it possible to use a selector in this case?

enter image description here

Answer 1

I think it would be best here to have your hamburger menu as an actual element, and not a pseudo element.

Pseudo elements have some limitations. One of them is that you can't add ':hover' states to them.

As an added bonus, I think that would be a more developer friendly solution. If an other developer needs to alter your code (of you a year from now) he can see the menu in your HTML code. HTML is for markup, CSS is for styling.

The :before and :after are generally used for minor additions to your code. Not for the important bits like navigation.

Answer 2

You can add :hover to pseudo-elements but pseudo-elements can't affect to their own elements (not with CSS).

Here is a quick summary with the possibilities of elements and pseudo-elements hover states.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 600px;
}

div {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
div:not(.pseudo-hover):hover::before {
  background-color: pink;
}
div.pseudo-hover:hover::before {
  background-color: pink;
}
div.pseudo-hover::before, div.pseudo-hover-all::before {
  pointer-events: initial;
}
div.pseudo-hover-all {
  pointer-events: none;
}
div::before {
  content: '::before';
  position: absolute;
  width: 60%;
  height: 50%;
  background-color: aquamarine;
  top: 0;
  right: -60%;
  cursor: pointer;
  pointer-events: none;
}

<h3>Hover on element affects to pseudo-element</h3>
<div>Element</div>
<h3>Hover on pseudo-element or element affects to pseudo-element</h3>
<div class="pseudo-hover">Element</div>
<h3>Hover on pseudo-element affects only to pseudo-element</h3>
<div class="pseudo-hover-all">Element</div>