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

user_8196705 0
Viewed 32769

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

Using CSS I made the word "about" which has an 'id' of '#title4' have an underline and I was wondering how I can change the distance of the height from the underline to the word so there is a bigger gap between both?

Example of what I'm looking for

enter image description here

#title4 {
font-size: 2.5rem;
font-weight: 700;
margin-top: 5rem;
text-decoration: underline;
}

Site code

css html
9 Answers

The text-decoration-thickness CSS property sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

(Edge 87, Firefox 70, Safari 12, Chrome 87)

Syntax: auto | from-font | |

e.g. 

 .css_class
{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-thickness: 5px;
}
<div class="css_class">Test</div>

user_11803650

I am late, but this could still be useful to someone. By using text-underline-offset: ...px you can change the gap between those.

user_157166960

We can use background instead of border or text-decoration to have full control.

span {
  --color: red;
  --position: center bottom;
  --width: 50px;
  --height: 5px;
  background: linear-gradient(var(--color), var(--color)) var(--position) / var(--width) var(--height) no-repeat;
  padding-bottom: 10px;
  font: bold 2.5rem sans-serif;
}
<span>ABOUT</span>

user_106987410

Do just that and that's it .

#explore{
        background-color: #5C6BC0;
        width: 80px;
        height: 8px;
        margin: auto;
        display: block;
        margin-top: 10px;
    }
    
    .text{
    text-align:center;
    }
<h1 class="text">Explore<span id="explore"></span></h1>

user_112114730

yes it is possible

just add the following css code

    text-decoration: underline;
    text-decoration-color: #0000ff;
    text-decoration-thickness: 3px; // underline thickness
    -moz-text-decoration-color: #0000ff;
    text-underline-offset: 20px; // height of underline from text

user_130305340
Related