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

A text will need to span over multiple lines, even a heading will do with narrow viewports found on smartphones.
Here's a multiline solution done with a linear gradient (well, 2 of them to reproduce the dashes):

Codepen in Scss (simply using 2 variables for font-size and line-height)

span {
  font-size: 40px;
  line-height: 1.5;
  text-decoration: underline wavy red;
  /*text-decoration: overline dashed blue;*/
  background-image:
    linear-gradient(to right, white 0, white 50%, transparent 50%, transparent 100%),
    linear-gradient(to bottom, blue 0, blue 1px, transparent 1px, transparent 100%);
  background-size:
    8px 100%,
    100% 60px;
  background-position: left top, left top;
  background-repeat: repeat, repeat;
}

 Some Text 

Also
multiline

Dashes can be freely modified (it's a gradient between transparent and white color, size them however you want)