Grow your CSS skills. Land your dream job.

text-decoration

Last updated on:

The text-decoration property is used to add visual emphasis to content that is independent from the text's font style, weight or other properties.

Check out this Pen!

Prior to CSS3, the text-decoration property supported five values:

  1. none, which removes any decoration
  2. underline, which draws a 1px line across the text at the baseline
  3. line-through, which draws a 1px line across the text at the text's "middle" point
  4. overline, which draws a 1px line across the text at the text's "top" point
  5. blink, a much-maligned property that causes the text to flash, alternating between 0 and 100% opacity

The three properties that draw lines inherit the color of the text, determined by the color property. text-decoration supports the use of multiple values (text-decoration: underline overline;).

In CSS3, text-decoration is now a shorthand property, incorporating the following new properties (written in this order):

  • text-decoration-line, which supports the five values from CSS 2.1, outlined above
  • text-decoration-style, which supports the values solid, double, dotted, dashed, and wavy
  • text-decoration-color, which supports any CSS color value

The text-decoration-color and text-decoration-style values in the shorthand are optional and default to none if not explicitly stated, so in practice writing text-decoration is fully backwards-compatible in browsers that do not support CSS3. As of June 2013, only Firefox supports the CSS3 shorthand syntax.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

Comments

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

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".