How to Change the Length/Position of Text-Decoration:Underline

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

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>).

How to increase the gap between text and underlining in CSS

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

How to change width of underline in css

use border-bottom define color cording like this

b {    border-bottom: 1px solid red;    padding: 0 0 4px;}

<td><b>Grand Total</b></td>

Is it possible to change to the underline height from when the developer uses `text-decoration: underline;` in CSS to create an underline?

unfortunately, you cannot control text-decoration height and spacing between text. So I have used border-bottom. Hopefully, this will help you.

#title4 {    font-size: 2.5rem;    font-weight: 700;    margin-top: 5rem;    border-bottom: 5px solid #000;    display: inline-block;    padding-bottom: 10px;    font-family: sans-serif;}

<h1 class="text-center" id="title4">About</h1>

How to center and change the length of underline?

You can use an absolutely positioned pseudo element with left: 50%; transform: translate(-50%); to automatically center it horizontally relative to the content.

.footer p {  display: inline-block;  position: relative;}
.footer p:after {  content: "";  height: 1px;  width: 50%;  background-color: red;  position: absolute;  bottom: -.5em;  left: 50%;  transform: translate(-50%);}

<div class="footer">  <p>ADDITIONAL INFO</p></div>

How make text-decoration: underline with 2px padding?

You could wrap the text in a span and give it a border-bottom with padding-bottom:2px;.

Like so

span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

Example: http://jsfiddle.net/uSMGU/

Edit line thickness of CSS 'underline' attribute

Here is one way of achieving this :

HTML :

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS :

u {
  text-decoration: none;
  border-bottom: 10px solid black;
}

Here is an example: http://jsfiddle.net/AQ9rL/

How to Change the Length/Position of Text-Decoration:Underline