CSS - Multiple Text Decorations with Style and Color

Question

I want to make text with red wavy underlineand blue dashed overlinewith help text-decoration.
This is my code: (only works in Mozilla Firefox) (doesn't work because the display is only overline)

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

<span> Some Text </span>

Run codeHide result

How can I make this effect using only text-decoration? (I know it will only work in Mozilla Firefox)
Thanks for the help.

Answer 1

You cannot have two values ​​for the same css property at the same time.

Workaround: wrap the text with text in another spanand add a separate text layout to each interval:

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>

Run codeHide result

Answer 2

:

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

<span> Some Text </span>

Hide result

Aswer :

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>

Hide result

Answer 3

The text will have to cover several lines, even the title will work with narrow viewports on smartphones.
Here's a multi-line solution made with a linear gradient (well, 2 of them for playing dashes):

Codepen in Scss (just 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;
}

<p><span> Some Text </span></p>

<p><span>Also<br>multiline</span></p>

Run codeHide result

Dashes can be freely changed (this is the gradient between transparent and white, their size as you want)