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?

回答1:

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.

回答2:

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/

回答3:

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

回答4:

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

回答5:

Use a border-bottom instead of the underline

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

Change padding-bottom to adjust the space

回答6:

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;

回答7:

I would use border instead. Easier to control that.

回答8:

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.

As of early 2020, this is only supported in Safari 12.1+ and Firefox 70+.

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>

来源：https://stackoverflow.com/questions/9586596/control-underline-position-on-text-decoration-underline

标签

css

underline