Псевдоэлементы CSS
Добрый день друзья, в этом уроке, мы рассмотрим понятие псевдоэлемента CSS и выясним, какую функцию выполняет каждый из них. Разницу между псевдоклассом и псевдоэлементом смотрите в конце статьи.
Псевдоэлементы — это специальные команды, с помощью которых можно реализовывать выборку части элемента и задания им CSS-свойств, также можно создавать часть элемента.
Схема псевдоэлемента выглядит следующим образом:
селектор:псевдоэлемент {
CSS-свойства: значения;
}
Или
:псевдоэлемент {
CSS-свойства: значения;
}
Перед именем псевдоэлемента, ставится одинарное : или двойное двоеточие ::.
Двойное двоеточие ввели в CSS3, чтобы различать псевдоклассы и псевдоэлементы друг от друга.
Список псевдоэлементов CSS
:after— добавляет текст/символы в конец элемента с текстом, требуется CSS-свойство content:before— добавляет текст/символы в начало элемента с текстом, требуется CSS-свойство content:first-letter— задаёт CSS-свойства, первому символу текста элемента (можно создавать «буквицы»):first-line— задаёт CSS-свойства, первой строке текста элемента::after— псевдоэлемент CSS3, аналогичен :after::before— псевдоэлемент CSS3, аналогичен :before::first-letter— псевдоэлемент CSS3, аналогичен :first-letter::first-line— псевдоэлемент CSS3, аналогичен :first-line::selection— задаёт CSS-свойства, выделяемому пользователем тексту
Разница между псевдоклассом и псевдоэлементом заключается в следующем: псевдокласс задает стиль для элемента страницы, а псевдоэлемент задаёт стиль для части элемента страницы и даже может создавать дополнительную часть.