mozilla

Revision 394325 of text-decoration

  • Revision slug: Web/CSS/text-decoration
  • Revision title: text-decoration
  • Revision id: 394325
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment CSS/text-decoration Web/CSS/text-decoration

Revision Content

{{ CSSRef() }}

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 {{ cssxref("text-decoration-color") }}, {{ cssxref("text-decoration-line") }}, and {{ cssxref("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.

{{cssbox("text-decoration")}}

Syntax

Formal syntax: {{csssyntax("text-decoration")}}

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 {{non-standard_inline}} {{deprecated_inline}} {{obsolete_inline}}
Text blinks. Browsers may ignore this 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.
-moz-anchor-decoration
Mozilla CSS Extension, not suitable for web content.

Examples

{{ CSSRefExampleLink("text-decoration") }}

 p { text-decoration: line-through; }

 p { text-decoration: underline overline; }  /* multiple values are allowed */ 

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
{{ SpecName('CSS3 Text-decoration', '#text-decoration', 'text-decoration') }} {{ Spec2('CSS3 Text-decoration') }} Transformed in a shorthand property. Added support for the value of {{ cssxref('text-decoration-style') }}.
{{ SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration') }} {{ Spec2('CSS2.1') }} No significant changes.
{{ SpecName('CSS1', '#text-decoration', 'text-decoration') }} {{ Spec2('CSS1') }} Initial specification.

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.0") }} 1.0 3.0 3.5 1.0
blink value {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} 4.0 {{ CompatNo() }}
Shorthand property {{ CompatGeckoDesktop("6.0") }} [*] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
blink value {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Shorthand property {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[*] As a shorthand property, Gecko also resets the non standard {{ cssxref("-moz-text-blink") }} property.

See also

  • {{ CSS_Reference:Text() }}

Revision Source

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>text-decoration</code> CSS property is used to set the text formatting to <code>underline</code>, <code>overline</code>, <code>line-through</code> or <code>blink</code>.</p>
<p>Underline and overline decorations are positioned under the text, line-through over it.</p>
<div class="note style-wrap">
  <p><strong>Note: </strong>CSS Text Decoration Level 3 transformed this property as a shorthand for the three new {{ cssxref("text-decoration-color") }}, {{ cssxref("text-decoration-line") }}, and {{ cssxref("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.</p>
</div>
<p>{{cssbox("text-decoration")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-decoration")}}</pre>
<h3 id="Value" name="Value">Values</h3>
<p>Accepts <strong>one or more</strong> whitespace separated values:</p>
<dl>
  <dt>
    <code>none</code></dt>
  <dd>
    Produces no text decoration.</dd>
  <dt>
    <code>underline</code></dt>
  <dd>
    Each line of text is underlined.</dd>
  <dt>
    <code>overline</code></dt>
  <dd>
    Each line of text has a line above it.</dd>
  <dt>
    <code>line-through</code></dt>
  <dd>
    Each line of text has a line through the middle.</dd>
  <dt>
    <code>blink</code> {{non-standard_inline}} {{deprecated_inline}} {{obsolete_inline}}</dt>
  <dd>
    Text blinks. Browsers may ignore this value (without making the declaration invalid), as Internet Explorer and Safari does. Supported by Firefox (Gecko) and Opera. Note that <em>not</em> blinking the text is one technique to satisfy <a class="external" href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</dd>
  <dt>
    <code>-moz-anchor-decoration</code></dt>
  <dd>
    <a href="/en-US/docs/CSS_Reference/Mozilla_Extensions" title="CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a>, not suitable for web content.</dd>
</dl>
<h2 id="Example" name="Example">Examples</h2>
<p>{{ CSSRefExampleLink("text-decoration") }}</p>
<pre>
 <span style="text-decoration: line-through;">p { text-decoration: line-through; }</span>

 <span style="text-decoration: underline overline;">p { text-decoration: underline overline; }</span>  /* multiple values are allowed */ </pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>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.</p>
<p>For example, in the markup:<br />
  <code>&lt;p&gt;This text has &lt;em&gt;some emphasized words&lt;/em&gt; in it.&lt;/p&gt;</code><br />
  the style rule:<br />
  <code>p { text-decoration: underline }</code><br />
  would cause the entire paragraph to be underlined. However, the style rule:<br />
  <code>em { text-decoration: none }</code><br />
  would not cause any change; the entire paragraph would still be underlined.<br />
  (However, the rule <code>em { text-decoration: overline }</code> would cause a second decoration to appear on "some emphasized words".)</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Text-decoration', '#text-decoration', 'text-decoration') }}</td>
      <td>{{ Spec2('CSS3 Text-decoration') }}</td>
      <td>Transformed in a shorthand property. Added support for the value of {{ cssxref('text-decoration-style') }}.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>No significant changes.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#text-decoration', 'text-decoration') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>Initial specification.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>1.0</td>
        <td>3.0</td>
        <td>3.5</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td><code>blink</code> value</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>4.0</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>Shorthand property</td>
        <td>{{ CompatGeckoDesktop("6.0") }} [*]</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>blink</code> value</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Shorthand property</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] As a shorthand property, Gecko also resets the non standard {{ cssxref("-moz-text-blink") }} property.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Text() }}</li>
</ul>
Revert to this revision