
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .animated-underline {
position: relative;
text-decoration: none;
}
.animated-underline::after {
content: "" ;
position: absolute;
left: 50%;
top: 100%;
width: 100%;
height: 0.125em;
background-color: hsl(200deg, 100%, 50%);
transition: transform 320ms ease;
transform: translate(-50%, 0%) scaleX(0);
transform-origin: right;
}
.animated-underline:hover::after {
transform-origin: left;
transform: translate(-50%, 0%) scaleX(1);
}
|
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonUnterstreichung von animiertem Text nur in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!