tgoop.com/prog_way_blog/219
Create:
Last Update:
Last Update:
Что такое псевдоэлементы
Псевдоэлементы — это специальные ключевые слова, которые используются для дополнительной стилизации страницы без изменения HTML.
Одними из наиболее распространенных псевдоэлементов являются ::before
и ::after
. Они позволяют добавить контент до или после содержимого элемента соответственно:
div::before {
content: "До элемента";
}
div::after {
content: "После элемента";
}
У нас обязательно должно быть свойство
content
, а в остальном — можно использовать любые CSS правила.Смотрите крутую статью на доке, там гораздо больше теории и других псевдоэлементов. А я рассмотрю интересный пример с прикрепленной гифки:
.btn::before {
background-color: #0A88F3;
transition: 0.3s ease-out;
}
.btn.hover-filled-slide-right::before {
top:0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
width: 0%;
}
Тут вся магия реализована как раз через
::before
, и это, как я считаю, самый удобный и правильный способ реализовать подобное. Мы просто анимируем параметр width
, постепенно приводя его из 100% в 0% на наведение курсора. Всё гениальное просто.Накидайте бананов 🍌, если вам нравятся посты с гифками и примерами с кодпена. Может почаще делать буду такое.
Спасибо за прочтение, это важно для меня ❤️
@prog_way_blog — #web #theory #code
BY progway — программирование, IT
Share with your friend now:
tgoop.com/prog_way_blog/219