Псевдоэлементы в CSS: продвинутая стилизация

0
1180
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Перевод статьи «Advanced Styling using CSS Pseudo Elements».

Код CSS: псевдоэлемент ::marker для элемента списка.

Недавно мы разбирали тему селекторов атрибутов. Сегодня поговорим о псевдоэлементах.

Псевдоэлементы в 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.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here