The text underline effect on hover is a popular technique in web design that helps highlight interactive elements such as links. In this guide, we will explore how to create a smooth text underline using CSS.

Below is the CSS code that creates an underline effect when hovering over an element:

CSS

selector::after {
  content: '';
  position: relative;
  top: 0%;
  display: block;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}

selector:hover::after {
  width: 100%;
  background: #000;
}

This code uses the ::after pseudo-element, which adds a line below the text. Initially, the width of the line is zero, and it only becomes visible when the cursor hovers over the element.

How it Works

• selector:hover::after: When the cursor hovers over the element, the width of the line increases to 100%, and the background color is set to black.
• ::after Pseudo-element: This element is created after the content of the selected element and is used to display the underline.
• transition Property: This allows animating changes in the width and background color of the line, creating a smooth effect.

Conclusion

The smooth text underline effect on hover not only enhances the visual appeal of your site but also makes it more interactive for users. By using pseudo-elements and CSS transitions, you can easily customize this effect for various elements on the page.