CODEWITHSUNDEEP
cssunderline
redconservatory
redconservatory

Reputation: 21924

Control underline position on text-decoration: underline

Is there a way to control the position of the underline in text-decoration: underline?

<a href="#">Example link</a>

The example above has an underline by default...is there a way to nudge that underline down by a few pixels so that there is more space between the text and the underline?

Upvotes: 66

Views: 121123

Answers (9)

Dory Daniel
Dory Daniel

Reputation: 826

2023

You can use text-underline-position: under;

a {
  text-decoration: underline;
  text-underline-position: under;
}
<h1>
  <a href="#">My link</a>
</h1>

Upvotes: 10

ericek111
ericek111

Reputation: 634

2021

There is the text-underline-offset property in CSS Text Decoration Module Level 4 which allows you to move the decoration by a specified distance away from its original position.

Supported in Safari 12.1+, Firefox 70+ and Chrome 87+ (released 2020-11-17).

text-underline-offset property accepts these values:

  • auto - default, makes the browser choose the appropriate offset.
  • from-font - if the used font specifies a preferred offset, use that, otherwise it falls back to auto.
  • <length> - specify distance in the "usual" CSS length units. Use em to allow scaling proportionally with the font-size.

Example below:

p {
  text-decoration: underline;
  text-decoration-color: red;
  margin-bottom: 1.5em;
}

p.test {
  position: relative;
}

p.test::after {
  position: absolute;
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: blue;
  bottom: 0;
}
<p style="text-underline-offset: 0.75em;" class="test">
  If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>

<p style="text-underline-offset: auto">
  And now let’s try it with `text-underline-offset` set to `auto`.
</p>

<p style="text-underline-offset: from-font">
  With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>

Upvotes: 16

Ry-
Ry-

Reputation: 224886

2020

Use text-underline-offset!

2012

The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Here's a demo. If that's not enough space, you can easily add more — if it's too much, that's a little less convenient.

Upvotes: 91

Jinu Kurian
Jinu Kurian

Reputation: 9416

There is one property text-underline-position: under. But only supported in Chrome and IE 10+.

More info: https://css-tricks.com/almanac/properties/t/text-underline-position/ https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

Upvotes: 4

Bryan Willis
Bryan Willis

Reputation: 3642

You can use pseudo before and after like this. It works well and is completely customizable.

CSS

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

HTML

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>


Here's a more advanced demo with a screenshot attached I made that animates the underline on hovering, changes colors, etc...

http://codepen.io/bootstrapped/details/yJqbPa/

underline css

Upvotes: 25

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

There is the proposed text-underline-position property in CSS 3, but it seems that it has not been implemented in any browser yet.

So you would need to use the workaround of suppressing the underline and adding a bottom border, as suggested in other answers.

Note the the underline does not add to the total height of an element but bottom border does. In some situations, you might wish to use outline-bottom – which does not add to the total height – instead (though it is not as widely supported as border-bottom).

Upvotes: 16

Dorian
Dorian

Reputation: 23939

Using border-bottom-width and border-bottom-style will make the border the same color of the text by default:

text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;

Upvotes: 3

Julien
Julien

Reputation: 3529

Use a border-bottom instead of the underline

a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

Change padding-bottom to adjust the space

Upvotes: 3

mikevoermans
mikevoermans

Reputation: 4007

I would use border instead. Easier to control that.

Upvotes: 0

Related Questions