Псевдоэлементы
Виртуальные элементы, создаваемые через CSS без добавления HTML-разметки.
Зачем нужно
Позволяют стилизовать части элемента или добавлять декоративный контент без лишнего HTML. Используются для иконок, декора и типографики.
Где используется
::before/::after— декоративные элементы, иконки, кавычки::selection— стилизация выделенного текста::placeholder— стиль placeholder в инпутах::marker— маркеры списков
Code example
/* Декоративная иконка */
a.external::after {
content: " ↗";
font-size: 0.8em;
}
/* Стилизация выделения */
::selection {
background: #2563eb;
color: white;
}
/* Кастомный placeholder */
input::placeholder {
color: #9ca3af;
font-style: italic;
}
/* Маркеры списка */
li::marker {
color: #f59e0b;
font-weight: bold;
}
/* Декоративная линия */
h2::before {
content: "";
display: block;
width: 40px;
height: 3px;
background: #3b82f6;
margin-bottom: 8px;
}