CSS-псевдоэлементы позволяют стилизовать элементы или части элементов, не добавляя к ним идентификаторы (#id
) или классы (.class
). Это будет полезно в ситуациях, когда вы просто хотите стилизовать первую букву абзаца, чтобы создать эффект буквицы, или вы хотите вставить некоторый контент до или после элемента и т. д. только через таблицу стилей.
CSS3 ввел новый синтаксис двойных двоеточий (::
) для псевдо-элементов, чтобы различать их и псевдоклассы. Новый синтаксис псевдоэлемента может быть задан с помощью:
selector::pseudo-element { property: value; }
Теперь рассмотрим наиболее часто используемые псевдоэлементы:
Псевдоэлемент ::first-line
Псевдоэлемент ::first-line
применяет специальный стиль к первой строке текста.
Правила в следующем примере форматируют первую строку текста в абзаце. Длина первой строки зависит от размера окна браузера или содержащего его элемента.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
CSS-свойства, которые можно применить к псевдоэлементу ::first-line
: font
, background
, color
, word-spacing
, letter-spacing
, text-decoration
, vertical-align
, text-transform
, line-height
.
Псевдоэлемент ::first-letter
Псевдоэлемент ::first-letter
используется для добавления специального стиля к первой букве первой строки текста. Правила в следующем примере форматируют первую букву абзаца текста и создают эффект буквицы.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
CSS-свойства, которые можно применить к псевдоэлементу ::first-letter
: font
, text-decoration
, text-transform
, letter-spacing
, word-spacing
, line-height
, float
, vertical-align
(только если float
установлен none
), color
, margin
и padding
, border
, background
.
Псевдоэлементы ::before и ::after
Псевдоэлементы ::before
и ::after
могут быть использованы для вставки сгенерированного контента до или после содержимого элемента. CSS-свойство content
используется вместе с этими псевдо-элементами для вставки сгенерированного контента.
Это очень полезно для дальнейшего украшения элемента дополнительным содержимым, которое не должно быть частью фактической разметки страницы. Используя эти псевдоэлементы, вы можете вставлять обычные строки текста или встроенные объекты, такие как изображения и другие ресурсы.
h1::before {
content: url("images/marker-left.gif");
}
h1::after {
content: url("images/marker-right.gif");
}
Псевдоэлементы и CSS-классы
Обычно нам нужно стилизовать только определенный абзац текста или другие блочные элементы с этими псевдоэлементами. Вот тут и вступает в игру объявление класса с псевдоэлементом. Псевдоэлементы могут быть объединены с классами CSS для создания нужного эффекта.
Правила в следующем примере будут отображать первую букву всех абзацев с class="article"
зеленым цветом и размером xx-large
.
p.article::first-letter {
color: #00ff00;
font-size: xx-large;
}