Beschreibung:
Möglichkeit 1
.fancy-link {
text-decoration: none;
color: #ab2524;
position: relative;
}
.fancy-link::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: currentColor;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
transition: -webkit-transform 250ms ease-in;
transition: transform 250ms ease-in;
transition: transform 250ms ease-in, -webkit-transform 250ms ease-in;
}
.fancy-link:hover::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: left;
transform-origin: left;
}