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.

Fulcher

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>

Featly

Thanks. But is it only one way to do that? – Fulcher

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>

Malissamalissia

Ok. Thanks, How can I modify border-top position to get strikethrough effect? – Fulcher

Answer 3

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;
}

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

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

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

Wed

Answer 4

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;
}

<span>Some Text</span>

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;
}

<span class="parent"><span class="child">Some Text</span></span>

Wideawake