Простой, но весьма интересный hover-эффект для текста
18 марта 2025 г.WebTaverna js, css, html
Простой, но весьма интересный hover-эффект для текста
HTML разметка
<h1>t.me/WebTaverna</h1>CSS стили
h1 {
color: #fff;
font-size: 2.5em;
padding: 0.5rem 1rem;
position: relative;
}
h1::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
background: #f29559;
z-index: -1;
}
h1:hover::before {
animation: fill 1s forwards;
}
@keyframes fill {
0% {
width: 0%;
}
50% {
width: 100%;
height: 2px;
}
100% {
width: 100%;
height: 100%;
background: #f29559;
}
}
👍- если было полезно | ➡️ WebTaverna