Перевод статьи «Advanced Styling using CSS Pseudo Elements».
Недавно мы разбирали тему селекторов атрибутов. Сегодня поговорим о псевдоэлементах.
Псевдоэлементы в CSS применяются для стилизации определенных частей элемента. При правильном использовании они помогут вам создать потрясающие стили. Давайте рассмотрим несколько.
::first-letter
Псевдоэлемент ::first-letter используется для стилизации первой буквы текста.
See the Pen ::first-letter by Linda (@LindaOjo) on CodePen.
::first-line
Аналогично псевдоэлемент ::first-line используется для стилизации первой строки.
See the Pen ::first-line by Linda (@LindaOjo) on CodePen.
::before и ::after
При помощи псевдоэлемента ::before можно вставить какой-то контент перед содержимым элемента.
Соответственно псевдоэлемент ::after позволяет добавить что-то после содержимого элемента.
See the Pen ::before & ::after by Linda (@LindaOjo) on CodePen.
::selection
Псевдоэлемент ::selection позволяет задать стили для текста, выделенного пользователем. Попробуйте выделить какую-то часть текста в примере. Фон выделения сменится на черный, а цвет текста — на белый.
See the Pen ::selection by Linda (@LindaOjo) on CodePen.
::placeholder
При помощи псевдоэлемента ::placeholder можно определить, как должен выглядеть текст заглушки в элементах input или textarea.
See the Pen ::placeholder by Linda (@LindaOjo) on CodePen.
::marker
Псевдоэлемент ::marker используется для стилизации списков. В частности, маркеров элементов (значков или номеров). Работает с любыми элементами, для которых установлено display: list-item, например <li> или <summary>.
See the Pen ::marker by Linda (@LindaOjo) on CodePen.
