This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

text-decoration

Summary

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. underline and overline decorations are positioned under the text, line-through over it.

Overview table

Initial value
none
Applies to
All elements
Inherited
No
Media
visual
Computed value
As specified
Animatable
No
CSS Object Model Property
textDecoration
Percentages
???

Syntax

  • text-decoration: blink
  • text-decoration: line-through
  • text-decoration: none
  • text-decoration: overline
  • text-decoration: underline

Values

none
Produces no text decoration.
underline
Each line of text is underlined.
overline
Each line of text has a line above it.
line-through
Each line of text has a line through the middle.
blink
Text blinks.

Examples


<p class="under">Underlined text</p>
<p class="over">Overlined text</p>
<p class="through">Line through text</p>
<p class="blink">Blinking text</p>
<p class="mixed">Mixed decoration text</p>
[View live example](http://code.webplatform.org/gist/7283381)
.under   { text-decoration: underline; }
.over    { text-decoration: overline; }
.through { text-decoration: line-through; }
.blink   { text-decoration: blink; }
.mixed   { text-decoration: underline overline line-through; }

Usage

 CSS Text Decoration Level 3 transformed this property as a shorthand for the three new text-decoration-color, text-decoration-line, and text-decoration-style CSS properties. Like for any other shorthand property, it means that it resets their value to their default if not explicitely set in the shorthand.

Browsers may ignore the blink value (without making the declaration invalid), as Internet Explorer and Safari does. Supported by Firefox (Gecko) and Opera. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG.

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup:

<p>This text has <em>some emphasized words</em> in it.</p>

the style rule:

p { text-decoration: underline }

would cause the entire paragraph to be underlined. However, the style rule:

em { text-decoration: none }

would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

The default value is different for the following tags.

  • Default value is underline for a when used with href, u, and ins.
  • Default value is line-through for strike, s, and del.

If the value none is placed at the end of the values, all values are cleared. For example, setting {text-decoration: underline overline blink none} causes none of the decorations to render. If the object has no text (for example, the img object in HTML) or is an empty object (for example, <em></em>), this property has no effect. If you set the text-decoration attribute to none on the body object, the a objects are still underlined. To remove the underline from the a objects, either set the style inline or use a as a selector in the global style sheet. Specifying the text-decoration property for block elements affects all inline children. If it is specified for, or affects, an inline element, it affects all boxes generated by the element.

Related specifications

CSS Fonts Module Level 3
Working Draft
CSS Level 2 (Revision 1)
Recommendation
CSS Level 1
Recommendation

See also

External resources

Attributions