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
- How to use if else statement in c++?
- How to use godaddy domain name with another godaddy hosting account?
- Restore of database 'DATABASE' failed. (Microsoft.SqlServer.Management.RelationalEngineTasks)
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
- How to calculate days difference between two dates in c#?
- Changing date format in jQuery ui datepicker
Related Article