mozilla

Revision 25153 of text-decoration

  • Revision slug: CSS/text-decoration
  • Revision title: text-decoration
  • Revision id: 25153
  • Created:
  • Creator: keneb
  • Is current revision? No
  • Comment 1 words added, 1 words removed; page display name reset to default

Revision Content

{{ CSSRef() }}

Summary

The text-decoration CSS property is used to set the text formattings underline, overline, line-through and blink.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

text-decoration:   none | [underline || overline || line-through || blink] | inherit

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
Text blinks. Browsers may ignore this value, 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

Browser compatibility

Browser Lowest Version blink value
Internet Explorer 3.0 no
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0)
Opera 3.5 4.0
Safari (WebKit) 1.0 (85) no

See also

{{ CSS_Reference:Text() }}

{{ languages( { "fr": "fr/CSS/text-decoration" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> text-decoration </code>CSS property is used to set the text formattings<code> underline, overline, line-through </code>and<code> blink</code>.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>text-decoration:   none | [underline || overline || line-through || blink] | inherit</pre>
<h3>Values</h3>
<p>Accepts <strong>one or more</strong> whitespace separated values:</p>
<dl> <dt>none</dt> <dd>Produces no text decoration.</dd> <dt>underline</dt> <dd>Each line of text is underlined.</dd> <dt>overline</dt> <dd>Each line of text has a line above it.</dd> <dt>line-through</dt> <dd>Each line of text has a line through the middle.</dd> <dt>blink</dt> <dd>Text blinks. Browsers may ignore this value, 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>-moz-anchor-decoration</dt> <dd><a href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a>, not suitable for web content.</dd>
</dl>
<h3>Examples</h3>
<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>
<h3>Notes</h3>
<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>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#lining-striking-props" title="http://www.w3.org/TR/CSS21/text.html#lining-striking-props">CSS 2.1 Text</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th><code>blink</code> value</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>3.0</strong></td> <td>no</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td><strong>3.5</strong></td> <td>4.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> <td>no</td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
<p>{{ languages( { "fr": "fr/CSS/text-decoration" } ) }}</p>
Revert to this revision