Hover underline text effect-CSS examples

Create an animated underline effect when the text hovers over it.

HTML CODE:

<p class="hover-underline-animation">
    Hover this text to see the effect!
</p>

CSS CODE:

.hover-underline-animation{
    display:inline-block;
    position:relative;
    color:#0087ca;
}
     .hover-underline-animation::after{
        content:'';
        position:absolute;
        width:100%;
        transform:scaleX(0);
        height:2px;
        bottom:0;
        left:0;
        background-color:#0087ca;
        transform-origin:bottom right;
        transition:transform 0.25s ease-out;
    }
     .hover-underline-animation:hover::after{
        transform:scaleX(1);
        transform-origin:bottom left;
    }

Description

1. display: inline-block Make block p pone inline-block to prevent the underscore from spanning the entire parent width and not just the content (text).
2. position: relative A co-ordinate positioning context is established on the element for the pseudo element.
3. ::after Define pseudo elements.
4. position: absolute Takes a pseudo-element from the document stream and positions it relative to the parent element.
5. width: 100% Make sure the pseudo-element spans the entire width of the text block.
6. transform: scaleX(0) The pseudo-element is initially scaled to 0 so that it has no width and is not visible.
7. bottom: 0 And left: 0 place it at the bottom left of the block.
8. transition: transform 0.25s ease-out This means that the transform change will ease-out transition through the time function in 0.25 seconds.
9. transform-origin: bottom right Indicates that the transform anchor point is at the bottom right of the block.
10. :hover::after Then use to scaleX(1) convert the width to 100% and then transform-origin change it bottom left to position the point inversion to allow it to transition to the other direction when hovering.