HTML-CSS: Hover underline animation

Last update on March 07 2024 13:22:32 (UTC/GMT +8 hours)

HTML-CSS : Exercise-15 with Solution

Using HTML, CSS create an animated underline effect when the user hovers over the text.

Use display: inline-block to make the underline span just the width of the text content.
Use the :after pseudo-element with width: 100% and position: absolute to place it below the content.
Use transform: scaleX(0) to initially hide the pseudo-element.
Use the :hover pseudo-class selector to apply transform: scaleX(1) and display the pseudo-element on hover.
Animate transform using transform-origin: left and an appropriate transition.
Remove the transform-origin property to make the transform originate from the center of the element.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening html tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Character encoding -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag -->
<title>Using HTML, CSS create an animated underline effect when the user hovers over the text</title><!-- Title of the webpage -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><br><!-- Preview heading -->
<p class="hover-underline-animation">Hover w3resource text to see the effect!</p><!-- Paragraph with class for hover underline animation -->
</body><!-- Closing body tag -->
</html><!-- Closing html tag -->

Explanation:

: License information comment.
<!DOCTYPE html>: Declares the document type as HTML.
<html>: Opening tag for the HTML document.
<head>: Opening tag for the head section containing metadata.
<meta charset="utf-8">: Specifies the character encoding.
<meta name="viewport" content="width=device-width">: Configures the viewport for responsive design.
<title>Using HTML, CSS create an animated underline effect when the user hovers over the text</title>: Sets the title of the webpage.
<body>: Opening tag for the body section.
Preview: : Heading for the preview section.
Hover w3resource text to see the effect!: Paragraph element with a class for animated underline effect on hover.

CSS Code:

<style>
/* Opening style tag for CSS */

.w3rcontainer{
   border: 1px solid #cccfdb; /* Border style for w3rcontainer */
   border-radius: 2px; /* Border radius for w3rcontainer */
} 

.hover-underline-animation {
  display: inline-block; /* Display inline block */
  position: relative; /* Set position relative */
  color: #0087ca; /* Set text color */
}

.hover-underline-animation:after {
  content: ''; /* Add content after the element */
  position: absolute; /* Position absolute for pseudo-element */
  width: 100%; /* Full width */
  transform: scaleX(0); /* Initial scale of 0 for underline effect */
  height: 2px; /* Height of the underline */
  bottom: 0; /* Align to bottom */
  left: 0; /* Align to left */
  background-color: #0087ca; /* Background color of the underline */
  transform-origin: bottom right; /* Set transform origin */
  transition: transform 0.25s ease-out; /* Transition effect for the underline */
}

.hover-underline-animation:hover:after {
  transform: scaleX(1); /* Scale the underline on hover */
  transform-origin: bottom left; /* Set transform origin */
}
</style>
/* Closing style tag */

Explanation:

.w3rcontainer { ... }: Styles for a container element with class w3rcontainer.
.hover-underline-animation { ... }: Styles for elements with class hover-underline-animation.
:after: Pseudo-element used to create the underline effect.
content: '';: Empty content for the pseudo-element.
transform: scaleX(0);: Initially scales the underline to zero width, hiding it.
transition: transform 0.25s ease-out;: Adds a transition effect to the transform property for smooth animation.
.hover-underline-animation:hover:after { ... }: Styles applied when hovering over elements with class hover-underline-animation, making the underline visible by scaling it to full width.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.