Consider the following code.
a {
text-decoration-color: red;
}
.oops{
text-decoration: underline;
}
code {
border: 1px solid rgb(0 0 0 / 0.2);
padding-inline: 0.5em;
}<p>This <a href='#'>link</a> is underlined in red with <code>text-decoration-color: red</code>.</p>
<p>This <a href='#' class="oops">link</a> also has <code>text-decoration-color: red</code> applied, but is not underlined in red in Chrome or Firefox as it has <code>text-decoration: underline</code> applied, which is a short hand for <ul>
<li>text-decoration-color</li>
<li>text-decoration-line</li>
<li>text-decoration-style</li>
<li>text-decoration-thickness</li>
</ul></p>If you view this in Chrome or Firefox, the 2nd link is not underlined in red, as text-decoration-color is overridden by the text-decoration-shorthand (even though color is not specified as part of it). In Safari, it is underlined in red, as text-decoration-color overrides the shorthand.
The discrepancy can be easily resolved by changing text-decoration: underline to text-decoration-line: underline, but I am wondering… which is the correct behaviour here according to the spec?
4
It’s as I suspected, but confirmed in the question comments ( by @TemaniAfif, and linked by @C3Roe)
Omitting properties: A value which is not specified is set to its initial value. That means that it overrides previously set values.
Source
By using text-decoration (the shorthand), you’re effectively setting each of the constituent properties to initial.
See the example below:
.secondand.thirdhave the same effect.fourthhas the desired effect (from your example) in that it doesn’t override the previously set values
a {
text-decoration-color: red;
}
.second {
text-decoration: underline;
}
.third {
text-decoration-color: initial;
text-decoration-line: underline;
text-decoration-style: initial;
text-decoration-thickness: initial;
}
.fourth {
text-decoration-line: underline;
}<a href='#'>First</a>
</br>
<a href='#' class="second">Second</a>
</br>
<a href='#' class="third">Third</a>
</br>
<a href='#' class="fourth">Fourth</a>As for Safari…
From what I’ve seen in the Safari Elements panel, it appears that when using the shorthand for a property text-decoration, Safari will attempt to split that property into it’s constituent properties.