Heim >Web-Frontend >CSS-Tutorial >Unterstreichung von animiertem Text nur in CSS
.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); }
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!