text-decoration

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

h3 {
  text-decoration: underline;
}

Values

  • none: no line is drawn, and any existing decoration is removed.
  • underline: draws a 1px line across the text at its baseline.
  • line-through: draws a 1px line across the text at its "middle" point.
  • overline: draws a 1px line across the text, directly above its "top" point.
  • inherit: inherits the decoration of the parent.

The blink value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to "blink" by rapidly toggling it between 0% and 100% opacity.

Demo

See the Pen CSS-Tricks: Text Decoration by CSS-Tricks (@css-tricks) on CodePen.

Usage Notes

You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines:

p {
  text-decoration: overline underline line-through;
}

By default, the line or lines inherit the color of the text as set by its color property. You can change this in browsers that support the text-decoration-color property or the three-value shorthand property.

text-decoration as a Shorthand Property

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:

.underlined {
  text-decoration: underline dotted red;
}

Currently only Firefox supports this unprefixed. Safari supports it with the -webkit prefix. Chrome also needs the -webkit prefix and experimental web platform features enabled in Chrome flags.

Related

More Information

Browser Support

All browsers support the CSS2.1 "longhand" property text-decoration. The shorthand property and the sub-properties text-decoration-color, text-decoration-line, and text-decoration-style are supported unprefixed in Firefox, and with the -webkit prefix in Safari. Chrome will also recognize those values with the -webkit prefix and Experimental Web Platforms flag enabled.

Chrome Safari Firefox Opera IE Android iOS
Any * † Any * Any Any ‡ Any ‡ Any ‡ Any *

* text-decoration fully supported, sub-properties supported with -webkit prefix.
† sub-properties additionally require experimental web platform features flag enabled.
‡ CSS2.1 text-decoration only; sub-properties not supported.

Comments

  1. User Avatar
    robby mahdi
    Permalink to comment#

    please tell me how to Disable right click to several text only

  2. User Avatar
    My Apartment Need Furniture
    Permalink to comment#

    how to change the style of the underline?
    i mean change the underline color, size, etc.
    thanks..

  3. User Avatar
    Martijn
    Permalink to comment#
    -webkit-text-decoration-style: dotted;
    

    Doesn’t even work in Canary 36. The -moz- equivalent does work in Firefox.

    How to apply this property in Chrome then?

  4. User Avatar
    Rio Brewster
    Permalink to comment#

    I’m confused. The article says this is only supported in FF, but then in the table below it says that it “works” across all major browsers. Are you giving me false hope here?

    My experience is that text-decoration-style and text-decoration-color only work in FF and only with the -moz prefix.

    I would love to be able to use this, because using border-bottom can be quirky – and I can’t believe this wasn’t addressed in CSS2 much less CSS3.

  5. User Avatar
    Martijn

    Turns out in Chrome (26+, iirc) you need to enable an experimental features flag. Users aren’t going to do that even if you ask nicely. So Chrome, for most intents and purposes, does NOT support this feature yet.

    It’s technically in the codebase, and Chrome can technically support it, but virtually noone is going to see it working.

  6. User Avatar
    Martijn

    Same story for Opera, IE, Safari, Android, iOS, Dolphin, UC Browser, BlackBerry, WP8. Basically all browsers except (desktop?) Firefox don’t support text-decoration-style.

    • User Avatar
      Chris Krycho

      That situation looks to be changing slowly. Safari 8 (in the Yosemite developer preview) now has partial support for it: the double and wavy options render (the latter is ugly, though), and the text-decoration-color property is supported as well.

  7. User Avatar
    Deepak Sudera
    Permalink to comment#

    Chrome don’t support text-decoration-style.,,… but Firefox support.. Please help me for Chrome Browser…

  8. User Avatar
    Brian Pohuski
    Permalink to comment#

    By using inline-table and table-caption, we can force the proper positioning of a pseudo-element that allows proper scaling.

    a {
      text-decoration: none;
      display: inline-table;
    }
    
    a:after {
      content: "";
      width: 100%;
      border-bottom: 0.1em solid #f00;
      display: table-caption;
      vertical-align: baseline;
      position: relative;
      top: 0.9em;
    }
    

    My explanation on StackOverflow

  9. User Avatar
    Indian home decoration
    Permalink to comment#

    Thank you for providing such a useful information.

  10. User Avatar
    dadanini
    Permalink to comment#

    text-decoration specifications are still under development (http://www.w3.org/TR/css-text-decor-3/). everything with those subproperties ist experimental.
    if you need another color for your underline use an additional span element.
    for e.g.

    Try this!

    (<span style=”color:red; text-decoration: underline”><span style=”color: blue; text-decoration: none”>Try this!</span></span>)

    good luck, regards
    dadanini

    • User Avatar
      The ChanDroid
      Permalink to comment#

      Thank You – Not bad – I see myself using this…

  11. User Avatar
    Ahmad
    Permalink to comment#

    In webkit text-decoration-color doesn’t work.. what shame ! I always that If something works anywhere else it must work in webkit

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