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
- 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).
- position: relative A co-ordinate positioning context is established on the element for the pseudo element.
- ::after Define pseudo elements.
- position: absolute Takes a pseudo-element from the document stream and positions it relative to the parent element.
- width: 100% Make sure the pseudo-element spans the entire width of the text block.
- transform: scaleX(0) The pseudo-element is initially scaled to 0 so that it has no width and is not visible.
- bottom: 0 And left: 0 place it at the bottom left of the block.
- transition: transform 0.25s ease-out This means that the transform change will ease-out transition through the time function in 0.25 seconds.
- transform-origin: bottom right Indicates that the transform anchor point is at the bottom right of the block.
- :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.
Post your comments / questions
Recent Article
- ModuleNotFounEerror:No module named celery in Django Project
- How to get domain name information from a Domain using Python
- ModulenotFoundError: no module named 'debug_toolbar' -SOLUTION
- How to create superuser in django project hosted in cPanel without terminal
- CSS & images not loading in django admin | cpanel without terminal
- Could not build wheels for mysqlclient, which is required to install pyproject.toml-based projects
- How to sell domain name on Godaddy (2023)
- TemplateSyntaxError at / Could not parse the remainder: ' + 1' from 'forloop.counter0 + 1'
Related Article