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
- Your system's memory configuration has changed since it entered hibernation.
- Save image to client browser using jQuery?
- Get filename of image jQuery?
- How to get the image src using JavaScript?
- System.Net.Http.Formatting, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Net.Http.Formatting' with identity 'System.Net.Http.Formatting, Version=4.0.0.0
- Cordova Android build error "Cannot read property 'length' of undefined". An error occurred while running subprocess cordova.
- ERROR in The Angular Compiler requires TypeScript >=3.9.2 and <4.0.0 but 3.8.3 was found instead
- Code ENOLOCAL Could not install from "android" as it does not contain a package.json file.
Related Article