:root {
--UnderlineColor: #000; /*цвет подчеркивания*/
--UnderlineHeight: 1.2px; /*размер подчеркивания*/
--UnderlinePadding: 5px; /*отступ от текста*/
}
@keyframes link-line {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(200%);
}
}
.link-underline .tn-atom {
position: relative;
padding-bottom: var(--UnderlinePadding);
overflow: hidden;
.underline-line {
position: absolute;
bottom: 0;
width: 100%;
display: block;
height: var(--UnderlineHeight);
background: var(--UnderlineColor);
&:before {
content: '';
position: absolute;
bottom: 0px;
left: 0;
display: block;
width: 100%;
height: var(--UnderlineHeight);
background: var(--UnderlineColor);
transform: translateX(-200%);
}
}
&:hover {
cursor: pointer;
.underline-line {
animation: link-line 0.7s cubic-bezier(.52,.04,.28,.97);
}
}
}