Что такое псевдоэлементы

Псевдоэлементы — это специальные ключевые слова, которые используются для дополнительной стилизации страницы без изменения 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