Псевдоэлементы - это специальные конструкции в CSS, которые позволяют создавать виртуальные элементы и добавлять к ним стили. Псевдоэлементы начинаются со знака двоеточия и указываются после селектора элемента. Они не существуют в DOM, но могут быть использованы для добавления дополнительных эффектов на страницу.
Два наиболее часто используемых псевдоэлемента - это ::before и ::after. Псевдоэлемент ::before позволяет добавить контент перед содержимым элемента, а псевдоэлемент ::after - после содержимого.
Вот пример использования псевдоэлемента ::before, чтобы добавить к карточке товара иконку и подпись:
Здесь мы добавляем иконку и текст "Shop Now" перед и после содержимого элемента div с классом .product-card. С помощью свойства content мы указываем, что должно быть отображено в псевдоэлементе, а с помощью свойства display мы указываем, как оно должно быть показано. Дополнительные свойства, такие как margin, padding и background-color, могут быть использованы для стилизации псевдоэлементов, так же как и для обычных элементов.
Кроме того, существует псевдоэлемент ::first-letter, который позволяет стилизовать первую букву текста в элементе, а псевдоэлемент ::selection - для стилизации выделенного текста на странице.
В заключение, псевдоэлементы - это мощный инструмент для добавления дополнительных эффектов на страницу и для улучшения ее внешнего вида. Они могут быть использованы в сочетании с другими свойствами и селекторами для создания более сложных эффектов и стилей.