When hovering element, affect :before pseudo element

Question

How can I affect the :before pseudo element when I hover on the main element?

I want the pseudo element to obtain a height value when I hover over the main element.

My code is like this:

HTML

<div class="object"></div>

CSS

.object:hover object:before {
  height: 30px;
}

Answer 1

To style the hovered before pseudo, you need to set the css combining two states like .object:before:hover {}.

I have attached the example showing that.

.object:before {
  content: " ";
  width: 30px;
  background-color: red;
  display: inline-block;
}

.object:hover:before {
  height: 30px;
}

<div class="object">
Hover Before Example
</div>

Answer 2

It has to be object:hover:before An example:

.object {
  width: 50px;
  height: 50px;
  background: blue;
}

.object:before {
  content: "HOVER";
  background: green;
  height: 3px;
}

.object:hover:before {
  display: block;
  height: 100px;
  background: red;
}

<div class="object"></div>