text-decoration-color

  • Revision slug: CSS/text-decoration-color
  • Revision title: text-decoration-color
  • Revision id: 347083
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment Correcting a non-sense edit and adjusting title hierarchy

Revision Content

{{ CSSRef }}

Summary

The text-decoration-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by {{ cssxref("text-decoration-line") }}. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.

  • {{ Xref_cssinitial }} currentColor
  • Applies to all elements
  • {{ Xref_cssinherited }} no
  • Media {{ Xref_cssvisual }}
  • {{ Xref_csscomputed }} the computed color

Syntax

text-decoration-color: <color> | inherit

Values

<color>
The color property accepts various keywords and numeric notations. See {{ Xref_csscolorvalue }} values for more details.

Examples

.example { 
    text-decoration: underline;
    text-decoration-color: red;
}

The example above has the same effect as the following code, which also adds a hover style.

<!DOCTYPE html>
<html>
<head>
<style>
.example {
  font-size: 24px;
  text-decoration: underline;
  color: red;
}
.example:hover {
  color: blue;
  text-decoration: line-through;
}
</style>
</head>
<body>
<span class="example">
  <span style="color:black">black text with red underline and blue hover</span>
</span>
</body>
</html>

Specifications

Specification Status Comment
{{ SpecName('CSS3 Text-decoration', '#text-decoration-color', 'text-decoration-color') }} {{ Spec2('CSS3 Text-decoration') }}  

Browser compatibility

{{ CompatibilityTable }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown }} {{ CompatGeckoDesktop("6.0") }}{{ property_prefix("-moz") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
Feature Android Firefox mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown }} {{ CompatGeckoMobile("6.0") }}{{ property_prefix("-moz") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}

See also

  • {{ CSS_Reference:Text }}

Revision Source

<div>
  {{ CSSRef }}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>text-decoration-color</code> CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by {{ cssxref("text-decoration-line") }}. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial }}</dfn><code> <a href="/en/CSS/color_value#currentColor_Keyword" title="currentColor keyword">currentColor</a></code></li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual }}</li>
  <li><dfn>{{ Xref_csscomputed }}</dfn> the computed color</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
text-decoration-color: <a href="/en/CSS/color_value" title="en/CSS/color_value">&lt;color&gt;</a> | <a href="/en/CSS/inherit" title="en/CSS/inherit">inherit</a>
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;color&gt;</code></dt>
  <dd>
    The <code>color</code> property accepts various keywords and numeric notations. See {{ Xref_csscolorvalue }} values for more details.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css; highlight:[3]">
.example { 
    text-decoration: underline;
    text-decoration-color: red;
}
</pre>
<p>The example above has the same effect as the following code, which also adds a hover style.</p>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.example {
  font-size: 24px;
  text-decoration: underline;
  color: red;
}
.example:hover {
  color: blue;
  text-decoration: line-through;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span class="example"&gt;
  &lt;span style="color:black"&gt;black text with red underline and blue hover&lt;/span&gt;
&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="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-color', 'text-decoration-color') }}</td>
      <td>{{ Spec2('CSS3 Text-decoration') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatGeckoDesktop("6.0") }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatGeckoMobile("6.0") }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Text }}</li>
</ul>
Revert to this revision