CSS - Multiple text-decorations with style and color

Question

I want to make a text with red wavy underline and blue dashed overline using text-decoration.
This is my code: (working only in Mo

Answer 1

You can specify multiple lines using text-decoration-line. You would think that you could specify a different colour and a different style for each line, however, this does not work, as you can see for yourself here:

span {
  /* This does not work! */
  text-decoration-line: underline overline;
  text-decoration-style: wavy dashed;
  text-decoration-color: red blue;
}

Some Text

This is what MDN says:

CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the text-decoration-line property), and specifying the line color (with text-decoration-color) on a per‐element basis.

So here is the solution using nesting:

.parent {
  text-decoration: underline wavy red;
}
.child {
  text-decoration: overline dashed blue;
}

Some Text