This is where the transcription doesn't work.

.balance{ overflow: hidden; position: relative; } .balance:before{ content: ''; position: absolute; width: 100%; height: 50px; left: 0; bottom: -50px; background: red; } .balance:hover:before{ transition: 0.8s; top: 0; }

  • First, you did not indicate what the transition should take. Secondly, if top was meant, then it has no initial value, and the browser does not know how to make a transition from auto (default value for top) - Alexey Ten

1 answer 1

You apply transition wrong property.

You initially, to the pseudo-element ::before , specified property bottom: -50px; , which indicates that the element is “hidden” under the lower border of the parent.
I dare to suggest that when targeting it should smoothly “appear” from the bottom up.
If this is so, then you should, when pointing to the parent, "give" to the pseudo-element ::before bottom: 0 property bottom: 0 , and not as indicated by you - top: 0; .

Here is an example:

 .balance{ overflow: hidden; position: relative; } .balance:before{ content: ''; position: absolute; width: 100%; height: 50px; left: 0; bottom: -50px; background: red; } .balance:hover:before{ transition: 0.8s; /*top: 0;*/ bottom: 0; } 
 <div class="balance">Наведи на меня</div>

I also assume that the following question will follow:

Why, after moving the cursor away from the animation element, there is no

I will answer:

For this, the transition property must be directly in the element to be animated.

 .balance::before {transition: 0.8s;}

Because .balance:hover::before makes it clear to the browser that the animation of the pseudo-element should appear only when pointing to the parent.