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 Mozilla Firefox) (don't works, because display only overline)

span {
  font-size: 40px;
  text-decoration: underline wavy red;
  text-decoration: overline dashed blue;
}

<span> Some Text </span>

How can I do that effect using only text-decoration? (I know, it will work only in Mozilla Firefox)
Thanks for help.

Answer 1

You can not have two values for one css property at the same time.

Workaround: wrap yout text in another span and add separate text-decoration to each span:

span {
  font-size: 40px;
}

.wavy {
  text-decoration: underline wavy red;
}

.dashed {
  text-decoration: overline dashed blue;
}

<span class="wavy">
  <span class="dashed">Some Text </span>
</span>

Answer 2

Try This:

span {
    position: relative;
    text-decoration: underline wavy red;
    border-top: 2px dashed blue;
}

<span> Some Text </span>

Aswer your comment is here:

span {
    position: relative;
    text-decoration: underline wavy red;
}

span:after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    content: '';
    border-top: 2px solid blue;
    top: 10px;
}

<span> Some Text </span>