Bug 259428

text-decoration is a short hand value that allows you to set <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> [0].

Currently Safari only supports setting one value.

See this example:

<p id="one"> Hello World </p>
<p id="two"> Hello World </p>
<p id="three"> Hello World </p>
<p id="four"> Hello World </p>

#one {
  text-decoration: underline;
}

#two {
  text-decoration: blue wavy underline;
}

#three {
  text-decoration: overline red;
}

#four {
  text-decoration-color: blue;
  text-decoration-style: wavy;
  text-decoration-line: underline;
}

This example works properly in Chrome and Firefox.

[0]: https://drafts.csswg.org/css-text-decor/#text-decoration-property