Псевдоэлементы присасываются к селекторам как псевдоклассы, принимая форму
selector:pseudoelement { property: value; }
Таких присосок четыре.
Первые буквы и первые строки
Псевдоэлемент first-letter применяется к первой букве внутри поля, а псевдоэлемент first-line — к самой верхней отображаемой строке в поле.

Нацеливание на первую букву и первую строку абзаца с помощью псевдоэлементов.
В качестве примера вы могли бы создать заглавные буквы и жирную первую строку для абзацев примерно таким образом:
p { font-size: 12px; } p:first-letter { font-size: 24px; float: left; } p:first-line { font-weight: bold; }
Спецификации CSS 3 предполагают, что псевдоэлементы должны содержать два двоеточия, поэтому p::first-line отличается от p:first-line. Это помогает отличать псевдоэлементы от псевдоклассов.
Стремясь к обратной совместимости (при которой старые веб-страницы будут по-прежнему работать в новых браузерах), браузеры будут по-прежнему вести себя, если столкнутся с подходом с одним двоеточием, и это остаётся лучшим подходом в большинстве случаев из-за того, что некоторые старые браузеры не распознают двойное двоеточие.
Псевдоэлементы before и after
Псевдоэлементы before и after используются в сочетании со свойством content для размещения содержимого по обе стороны от окна.
Значением свойства content может быть open-quote, close-quote, любая строка, заключённая в кавычки, или любое изображение, использующее url (imagename).
blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } li:before { content: "POW! "; } p:before { content: url(images/jam.jpg); }
Свойство content эффективно создаёт ещё одно поле для воспроизведения, так что вы также можете добавлять стили к “презентационному контенту”:
li:before { content: "POW! "; background: red; color: #fc0; }
Страницы в тему:
- Следующая страница: Макет страницы
- Предыдущая страница: Отображение
- Псевдоклассы
- Селекторы CSS