JSFiddle - React, Tailwind, and code Playground

by badsyntax

HTML

<h1>Creating a custom text-decoration: underline style</h1>

<h2>Why?</h2>

<ul>
    <li>Due to the lack of support for <a href="http://dev.w3.org/csswg/css-text-decor-3/#text-decoration-style">text-decoration-style</a> it's not possible to change the underline color (different to the anchor color).</li>
</ul>

<h2>Examples</h2>

<h3>With border</h3>

<p class="border"><a href="#">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</a>
</p>

<h3>With CSS3 gradient background</h3>

<p class="css3"> <a href="#">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</a>
</p>

<h3>With data-uri background</h3>

<p class="data-uri"><a href="#">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</a>
</p>

<hr />

<p>All of the above examples work fine <em>as long as the elements are displayed inline!</em></p>

<p>If you have a block element, none of the above solutions will work if the text wraps, but the border approach is the worst as it will also change the height of the block element.</p>

CSS

a {
    text-decoration: none;
}
.css3 a:hover {
    background: linear-gradient(-90deg, red 1px, transparent 1px) repeat-x center bottom / 2px 1px;
}
.data-uri a:hover {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QgdCTQ4bI4RNAAAACZpVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVAgb24gYSBNYWOV5F9bAAAAEUlEQVQI12P4z8Dwn4GBgQEADPwB/+08ZFkAAAAASUVORK5CYII=") repeat-x center bottom;
}
.border a:hover {
    border-bottom: 1px dotted red;
}