JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="gukipeqazun-saminipden">    
    <p><a href="http://zornet.ru/news">Здесь прописана ссылка</a></p>    
</div>

CSS

.gukipeqazun-saminipden a {
    color: #4783bf;
    text-decoration: none;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: relative;
    display: inline-block;
}

.gukipeqazun-saminipden a:hover {
    color: #337AB7;
    text-decoration:none;
}        

.gukipeqazun-saminipden a::before, .gukipeqazun-saminipden a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1.3px;
    background: #6395c7;
    content: '';
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}


.gukipeqazun-saminipden a::after {
    opacity: 0;
    -webkit-transition: top 0.5s, opacity 0.5s, -webkit-transform 0.5s;
    -moz-transition: top 0.5s, opacity 0.5s, -moz-transform 0.5s;
    transition: top 0.5s, opacity 0.5s, transform 0.5s;
}
.gukipeqazun-saminipden a:hover::before,
.gukipeqazun-saminipden a:hover::after,
.gukipeqazun-saminipden a:focus::before,
.gukipeqazun-saminipden a:focus::after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}
.gukipeqazun-saminipden a:hover::after,
.gukipeqazun-saminipden a:focus::after {
    top: 0%;
    opacity: 1;
}