Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<style>
*{
text-decoration-skip-ink: none;
}
</style>
<p style="color: blue;
text-decoration: underline line-through overline;
text-decoration-color: green;">
This blue text has green decoration lines
</p>
<p style="color: #ff0000;
text-decoration: underline line-through overline;
text-decoration-color: #ffff00;">
This red text has yellow decoration lines
</p>
<p style="color: rgb(0%, 0%, 100%);
text-decoration: underline line-through overline;
text-decoration-color: rgb(100%, 0%, 0%);">
This blue text has red lines
</p>
<p style="color: orange;
text-decoration: underline line-through overline;
text-decoration-color: transparent;">
This orange text has transparent lines
</p>
<p>
Here is no decoration lines, but
<span style="font-size: 2em;
color: blue;
text-decoration: underline line-through overline;
text-decoration-color: green;">
this blue text has green decoration lines</span>,
and here is no decoration lines too.
</p>
<p style="color: red;">
This is red paragraph and here is no decoration lines, but
<span style="font-size: 2em;
text-decoration: underline line-through overline;
text-decoration-color: green;">
here are green decoration lines</span>,
and here is no decoration lines too.
</p>
<p style="color: purple;
text-decoration: underline line-through overline;">
This is purple paragraph and here are decoration lines of current color, but
<span style="font-size: 2em;
text-decoration: underline line-through overline;
text-decoration-color: red;">
here are red decoration lines</span>,
and here are current color decoration lines.
</p>
<p style="color: green;
text-decoration: underline line-through overline;">
This is green paragraph and here are decoration lines of current color, and
<span style="font-size: 2em;
text-decoration-color: red;">
here is specified red decoration color but has current color lines</span>,
and here are current color decoration lines.
</p>
<p style="color: blue;">
This is blue paragraph,
<span style="font-size:2em;
color: red;
text-decoration: underline line-through overline;
text-decoration-color: inherit;">
here is red text with red decoration lines</span>,
and here is blue text without decoration lines.
</p>
<p style="color: blue;
text-decoration-color: green;">
This is blue paragraph and decoration color is specified as green,
<span style="font-size:2em;
color: red;
text-decoration: underline line-through overline;
text-decoration-color: inherit;">
here is red text with green decoration lines</span>,
and here is blue text without decoration lines.
</p>
<p style="color: blue;
text-decoration-color: red;
text-decoration: underline line-through overline;">
Here has blue decoration lines even though its color is specified as red
before text-decoration.
</p>