JSFiddle - React, Tailwind, and code Playground

by ILYA

HTML

<span class='link decorated-link'>Ссылка</span>, оформленая с помощью :after.
<br>
<br>
<span class='link border-bottom'>Ссылка</span>, оформленная с помощью border-bottom.

CSS

body {
  font-size: 24px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.link {
    color: #337ab7;
    cursor: pointer;
}

.link:hover {
    color: red;
}

.decorated-link {
    position: relative;
    
}

.decorated-link:after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 1px;
    width: 100%;
    border-bottom: 1px dashed #337ab7;
}

.decorated-link:hover:after {
    border-color: red;
}


.border-bottom {
    border-bottom: 1px dashed #337ab7;
}