text-underline-position

The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied.

a {
  text-underline-position: under;
}

Values

These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation:

  • auto: the default. The browser will decide between placing the underline at the text's baseline or under it.
  • inherit: inherits the underline position of the parent.
  • under: places the underline under the text with extra space to prevent crossing descenders.
  • left: for vertical writing modes. This places the line to the left of the text.
  • right: for vertical writing modes. This places the line to the right of the text.

Microsoft uses a different set of values for Internet Explorer:

  • auto: the default. Places the underline below the text for all languages except Japanese (see the MSDN link in the "More Information" section below for details).
  • above: positions the underline above the text. Visually identical to text-decoration: overline;
  • below: positions the underline below the text. Note that this is different from under — it will not clear descenders.
  • auto-pos works the same as the MS implementation of auto.

Demo

At the time of this writing, text-underline-position is only partially supported by Chrome (33+ with experimental flags enabled) and Internet Explorer 6+. Chrome supports the auto, inherit, and under values from the W3C candidate recommendation, while IE supports its own alternate values.

This demo shows the under and below values in the browsers that support them.

See the Pen text-underline-position by CSS-Tricks (@css-tricks) on CodePen.

Related

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
33 * None None None 6 † None None

* with -webkit prefix and experimental flags enabled in chrome://flags. left and right values not supported.
† with -ms prefix and IE-specific values.

Comments

  1. User Avatar
    dimpi
    Permalink to comment#

    working

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag