Псевдо-элементы в CSS позволяют стилизовать части элементов без изменения HTML-разметки. Они используются для добавления содержимого, декоративных эффектов или стилизации отдельных частей элементов.
Основные псевдо-элементы
::before— добавляет содержимое перед элементом.::after— добавляет содержимое после элемента.::first-letter— стилизует первую букву элемента.::first-line— стилизует первую строку элемента.::marker— стилизует маркеры списков.
Пример использования
p::before {
content: "→ ";
color: red;
}
p::after {
content: " ←";
color: blue;
}В этом примере перед текстом параграфа будет добавлена красная стрелка, а после текста — синяя.
Резюме
- Псевдо-элементы позволяют добавлять стилизованное содержимое без изменения HTML.
- Используются для декоративных эффектов и улучшения дизайна.
- Поддерживаются большинством современных браузеров.