Подчёркивание ссылки с помощью box-shadow

#my-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #000;
    font-size: 1.125rem;
}

#my-link a {
    box-shadow: inset 0 -1px 0 0 #fff, inset 0 -2px 0 0 #cc0e0e;
    color: #000;
    opacity: 1;
    text-decoration: none;
    -webkit-transition: color .25s, background .25s, opacity .25s;
    -moz-transition: color .25s, background .25s, opacity .25s;
    -ms-transition: color .25s, background .25s, opacity .25s;
    -o-transition: color .25s, background .25s, opacity .25s;
    transition: color .25s, background .25s, opacity .25s;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

#my-link a:hover {
    color: #cc0e0e;
}

<p id="my-link"><a href="https://translate.google.com/">Ссылка с подчёркиванием</a></p>

Результат:

Ссылка с подчёркиванием

Ещё вариант:

.article__text a {
    background: linear-gradient(to bottom,#222 50%,#222 50%);
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 1px 1px;
}