I am trying to animate background-color property on hovering from bottom to top and again from bottom to top when mouse is out. I have this pen, but it seems like width: 100% and height: 100% in ::after is calculated based on <p> tag, not <span>.
So how can I fix it? I want background-color animation just on underlined text (dolor), not for the whole paragraph.
div {
display: flex;
align-items: center;
justify-content: center;
}
p {
position: relative;
font: 2em sans-serif;
}
.underlined {
font-weight: bold;
text-decoration: underline solid black 0.1em;
transition: color 0.25s ease-out;
}
.underlined::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%; /* 100% of <p>, not <span> */
height: 100%; /* 100% of <p>, not <span> */
background: black;
z-index: -1;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.25s ease-out;
}
.underlined:hover {
color: white;
}
.underlined:hover::after {
transform: scaleY(1);
transform-origin: bottom;
}
.underlined:hover::selection {
color: black;
background: white;
}<div>
<p>Lorem ipsum <span class="underlined">dolor</span> sit amet</p>
</div>
>Solution :
add a position to <span> with class .underlined
.underlined {
position: relative;
}