How to animate underline from left to right?

by

You can use gradient and adjust background-position with a delay to obtain such effect:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000, #000);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}
<span class="un">Underlined Text</span>

In case you want a continuous animation on hover you can try this:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000, #000);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>

You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient

Another kind of animation

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(to right, #000 33%,transparent 33% 66%,#000 66%);
  background-position: right bottom;
  background-size: 300% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left bottom;
  transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>

let’s don’t forget the basic one:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000,#000);
  background-position: right bottom; /* OR left bottom*/
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.5s;
}

.un:hover {
  background-size: 0% 2px;
}
<span class="un">Underlined Text</span>

You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40

More Related Contents:

  1. Vertically center element on HTML page with some content on top (Bootstrap)
  2. comma after td entry html [closed]
  3. Using relative URL in CSS file, what location is it relative to?
  4. How to create a circle with links on border side
  5. Is there a CSS selector for the first direct child only?
  6. Why the content is not covered by the background of an overlapping element?
  7. CSS Cut out circle from a rectangular shape
  8. Problems with CSS sticky footer
  9. What is quirks mode?
  10. How to remove the underline for anchors(links)?
  11. Using “margin: 0 auto;” in Internet Explorer 8
  12. Removing margin from flex items when they wrap
  13. CSS background-size: cover replacement for Mobile Safari
  14. Html Select box options on Hover?
  15. :not(:empty) CSS selector is not working?
  16. How to vertically center a Bootstrap carousel-caption?
  17. Force browsers to load CSS before showing the page
  18. Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
  19. How do I prevent the padding property from changing width or height in CSS?
  20. How do I style the HTML form validation error messages with CSS?
  21. Is there a `pointer-events:hoverOnly` or similar in CSS?
  22. Adding style to file upload button in css
  23. Place a button right aligned
  24. Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?
  25. Splitting a table cell into two columns in HTML
  26. Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS
  27. How to center image in a div horizontally and vertically
  28. how to call browser based css?
  29. How can I position an icon over an image or video?
  30. 2 colors in one placeholder of input field

Leave a Comment