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 fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
- This action cannot be completed because the file is open in SQL Server(SQLEXPRESS) - FIXED
- Unicode error 'unicodeescape' codec can't decode bytes in position 2-3: truncated UXXXXXXXX escape
- Could not find the 'angular-devkit/build-angular:dev-server' builder's node package | Angular Error
- Error: error:0308010C:digital envelope routines::unsupported
Related Article