✅ Как создать анимацию подчеркивания текста?
В CSS есть свойство text-decoration: underline , оно позволяет подчеркнуть текст, но не создает анимированного подчеркивания. ⬇️
☑️ Для его создания нам необходимы псевдоэлементы after, before и псевдокласс hover. Все стили в теге a, это дизайн текста, бонусом мы оставляем эффект огня для текста: ⤵️
@code_ready | #практика #css
В CSS есть свойство text-decoration: underline , оно позволяет подчеркнуть текст, но не создает анимированного подчеркивания. ⬇️
☑️ Для его создания нам необходимы псевдоэлементы after, before и псевдокласс hover. Все стили в теге a, это дизайн текста, бонусом мы оставляем эффект огня для текста: ⤵️
body {
background-color: #000;
}
a {
color: #fff;
display: inline-block;
font-size: 70px;
font-family: sans-serif;
font-weight: 600;
text-decoration: none;
margin-top: 20%;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
a:after {
background-color: #f66d52;
display: block;
content: "";
height: 5px;
width: 0%;
-webkit-transition: width .5s ease-in-out;
transition: width .5s ease-in-out;
}
a:hover:after {
width: 100%;
}@code_ready | #практика #css