mozilla
Your Search Results

    text-decoration Redirect 1

    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.

    Note: 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 explicitly set in the shorthand.

    • Initial value the concatenation of the initial values of its longhand properties:
      • text-decoration-color: currentColor
      • text-decoration-style: solid
      • text-decoration-line: none
    • Applies to all elements
    • Inherited no
    • Media visual
    • Computed value as each of the properties of the shorthand:
      • text-decoration-line: as specified
      • text-decoration-style: as specified
      • text-decoration-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
    • Animatable as each of the properties of the shorthand:
      • text-decoration-color: yes, as a color
      • text-decoration-style: no
      • text-decoration-line: no
    • Canonical order order of appearance in the formal grammar of the values

    Syntax

    Formal syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

    Values

    Accepts one or more whitespace separated 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 
    Is a keyword making the text slowlyblinks. Though valid, the effect is deprecated and the specification allows browser to ignore this value. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG.
    -moz-anchor-decoration
    Mozilla CSS Extension, not suitable for web content.

    Examples

    CSS Content

    h1.under {
        text-decoration: underline;
    }
    h1.over {
        text-decoration: overline;
    }
    p.line {
        text-decoration: line-through;
    }
    p.blink {
        text-decoration: blink;
    }
    a.none {
        text-decoration: none;
    }
    p.underover {
        text-decoration: underline overline;
    }
    

    HTML Content

    <h1 class="under">Underlined Header</h1>
    <p class="line">If you want to strike out text, use line-through.</p>
    <p class="blink">This text might blink for you - if you use Explorer, it will not.</p>
    <h1 class="over">and now an overlined header.</h1>
    <p>This <a class="none" href="textdecoration.html">link will not be underlined</a> , as most links are by default.  Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
    <p class="underover">This text has both underline and overline.</p>
    

    Live Sample

    Notes

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

    Specifications

    Specification Status Comment
    CSS Text-decoration Level 3 Candidate Recommendation Transformed in a shorthand property. Added support for the value of text-decoration-style.
    CSS Level 2 (Revision 1) Recommendation No significant changes.
    CSS Level 1 Recommendation Initial specification.

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 1.0 (1.7 or earlier) 1.0 3.0 3.5 1.0
    blink value 1.0 (1.7 or earlier)
    Effect removed in 23.0 (23.0)
    (Yes) but without effect (Yes) but without effect 4.0
    Effect removed in 15.0
    (Yes) but without effect
    Shorthand property 6.0 (6.0) Not supported Not supported Not supported Not supported
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 (1.0) (Yes) (Yes) (Yes) (Yes)
    blink value 1.0 (1.7 or earlier)
    Effect removed in 23.0 (23.0)
    (Yes) but without effect (Yes) but without effect 4.0
    Effect removed in 15.0
    (Yes) but without effect
    Shorthand property 6.0 (6.0) ? ? ? ?

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar