Is there a way to style individual text-decoration when using multiple properties?-CodePudding

I would like to style to overline to be dashed and the underline to be dotted for a personal project of mine is there any way to achieve that using pure css?

p {
  color: green;
  text-decoration: underline overline;
  text-decoration-style: dashed;
  text-decoration-color: red;
}

<p>Decorated text</p><p>Decorated text</p><p>Decorated text</p>

CodePudding user response：

If you know it's on just one line then you could style the first-line to have one of the lines and the actual element to have the other.

This will work as well as setting a border, and is easier as the placement is already done for you (with border you have to worry about how to get the underline going through the descenders to make it look like a proper underline - which can vary depending on font used).

p {
  color: green;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
}

p::first-line {
  text-decoration: overline;
  text-decoration-style: dashed;
  text-decoration-color: red;
}

<p>Decorated text</p>
<p>Decorated text</p>
<p>Decorated text</p>

CodePudding user response：

Do you mean, something like this?

p,span {
  border-top:2px dotted red;
  border-bottom:2px dotted red;
}

<p>One p</p>
<p>Two p</p>
<p>Three p</p>

<div>
  <span>One span</span> No span <span>Two span</span> No Span <span>Three span</span> 
</div>