JSFiddle - React, Tailwind, and code Playground

by mavsic

HTML

<a class="a1" href="//google.com/">жирное подчеркивание: abcdefghijklmnopqrstuvwxyz 1234567890</a>

<br />
<br />

<a class="a2" href="//google.com/">подчеркивание бордером, большой просвет: abcdefghijklmnopqrstuvwxyz 1234567890</a>

<br />
<br />
    
<a class="a3" href="//google.com/"><span>идеальный вариант, тонкое, без просвета: abcdefghijklmnopqrstuvwxyz 1234567890</span></a>

CSS

.a1 {
    color: #00f;
    text-decoration: underline;
}
.a2 {
    color: #00f;
    text-decoration: none;
    border-bottom: 1px solid #aaf;
}
.a3 {
    color: rgba(0, 0, 255, .3);
}
.a3 span {
    color: #00f;
}