JSFiddle - React, Tailwind, and code Playground

HTML

<p><a href="/a/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</a></p>

<p><a href="/a/" class="dashed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</a></p>

<p><a href="/a/" class="dotted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</a></p>

<br/><p>Одинаковый цвет текста и точек</p>
<p><a href="/a/" class="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</a></p>

<br/><p>Способ с вложенными тегами</p>
<p><a href="/a/" class="my"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa neque, commodo vitae elementum nec, rutrum sed lorem. Vivamus sit amet libero ipsum, at semper tortor.</span></a></p>

CSS

p {
   margin: 10px;
}

a {
    color: #05C;
    text-decoration: none;
    background: -moz-linear-gradient(left, #B2CCF0, #B2CCF0 100%);
    background: -ms-linear-gradient(left, #B2CCF0, #B2CCF0 100%);
    background: -o-linear-gradient(left, #B2CCF0, #B2CCF0 100%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#B2CCF0), to(#B2CCF0));
    background: -webkit-linear-gradient(left, #B2CCF0, #B2CCF0  100%);
    background: linear-gradient(left, #B2CCF0, #B2CCF0 100%);
    background-position: 0 90%;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}

.dashed {
    background: -moz-linear-gradient(left, #B2CCF0, #B2CCF0 60%, transparent 60%);
    background: -ms-linear-gradient(left, #B2CCF0, #B2CCF0 60%, transparent 60%);
    background: -o-linear-gradient(left, #B2CCF0, #B2CCF0 60%, transparent 60%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#B2CCF0), color-stop(0.6, #B2CCF0), color-stop(0.6, transparent));
    background: -webkit-linear-gradient(left, #B2CCF0, #B2CCF0 60%, transparent 60%);
    background: linear-gradient(left, #B2CCF0, #B2CCF0 60%, transparent 60%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    background-position: 0 90%;
}

.dotted {
    background: -moz-linear-gradient(left, #B2CCF0, #B2CCF0 50%, transparent 50%);
    background: -ms-linear-gradient(left, #B2CCF0, #B2CCF0 50%, transparent 50%);
    background: -o-linear-gradient(left, #B2CCF0, #B2CCF0 50%, transparent 50%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(red), color-stop(0.5, #B2CCF0), color-stop(0.5, transparent));
    background: -webkit-linear-gradient(left, #B2CCF0, #B2CCF0 50%, transparent 50%);
    background: linear-gradient(left, #B2CCF0, #B2CCF0 50%, transparent 50%);
    background-size: 2px 1px;
    background-repeat: repeat-x;
    background-position: 0 90%;
}

.normal {
    background: -moz-linear-gradient(left, #05C, #05C 50%, transparent 50%);
    background:...