How to change the length/position of text-decoration:underline?

by

Use gradient and you can easily adjust size and position:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /*Adjust the background-position to move the line*/
  background-size: 80% 2px; /*Adjust the background size to control length and height*/
  background-repeat: no-repeat;
  padding-bottom: 4px; /* this can also control the position */
}

.small {
  background-size: 50% 1px;
}

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
  background-image: linear-gradient(red 0 0);
}

.right {
  background-position: bottom right;
}

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
  background-image: linear-gradient(blue 0 0);
}

.big {
  background-size: 100% 3px;
}

.far {
  padding-bottom: 10px;
  background-image: linear-gradient(purple 0 0);
}

body {
  font-size: 30px;
}
This is a <span class="underline">sentence</span>. I would like <span class="underline close">some words to have</span> longer <span class="underline left">underlines</span> than others. I would <span class="underline big center-close">also like</span> to be able to change the <span class="underline small right">position</span> of the <span class="underline big">underline</span>(to
<span class="underline far">be centered under the word, for example</span>).

More Related Contents:

  1. Trouble with image
  2. Which way to implement this picture in HTML CSS code and bootstrap
  3. Can I have an onclick effect in CSS?
  4. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  5. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  6. How to remove the arrow from a select element in Firefox
  7. Colspan/Rowspan for elements whose display is set to table-cell
  8. Change cursor type on input type=”file” [duplicate]
  9. How do I install a custom font on an HTML site
  10. Visible Area tag?
  11. problem with and :after with CSS in WebKit
  12. Line break (like ) using only css
  13. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  14. How to get a background image to print using css?
  15. How to set an image’s width and height without stretching it?
  16. Make flex items overlap
  17. HTML class attribute with spaces, it is a W3C valid class?
  18. Aligning elements left and center with flexbox
  19. How to set placeholder value using CSS?
  20. Changing the highlight color when selecting text in an HTML text input
  21. How to run the CSS3 animation to the end if the selector is not matching anymore?
  22. How to add button inside an input [closed]
  23. Unwanted border-radius corners around images in Brave/Chrome browser
  24. Progress Bar with HTML and CSS
  25. scrollable?
  26. Why aren’t my bootstrap 4 columns the same height?
  27. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  28. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  29. Changing image src depending on screen size
  30. Balanced text wrapping in HTML

Leave a Comment