CSS Псевдоэлементы

Псевдоэлементы CSS — это особый тип селектора, который может стилизовать определенные части элементов страницы без изменения структуры HTML.

Псевдоэлементы CSS используются для добавления специальных эффектов к определенным селекторам.

Распространенные псевдоэлементы CSS включают ::before, ::after, ::first-line, ::first-letter и т. д.

Синтаксис

Синтаксис псевдоэлемента:

selector::pseudo-element {
    property: value;
}

CSS-классы также могут использовать псевдоэлементы:

selector.class::pseudo-element {
    property: value;
}

Псевдоэлемент :first-line

Псевдоэлемент "first-line" используется для применения особого оформления к первой строке текста.

В следующем примере браузер отформатирует первую строку текста в элементе p в соответствии со стилями в псевдоэлементе "first-line":

Пример

p:first-line { color:#ff0000; font-variant:small-caps; }

Попробуйте сами »

Примечание:Псевдоэлемент "first-line" можно использовать только с блочными элементами.

Примечание:Следующие свойства можно применить к псевдоэлементу "first-line":

  • свойства шрифта
  • свойства цвета 
  • свойства фона
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Псевдоэлемент :first-letter

Псевдоэлемент "first-letter" используется для применения особого стиля к первой букве текста:

Пример

p:first-letter { color:#ff0000; font-size:xx-large; }

Попробуйте сами »

Примечание:Псевдоэлемент "first-letter" можно использовать только с блочными элементами.

Примечание:К псевдоэлементу "first-letter" можно применить следующие свойства:

  • свойства шрифта
  • свойства цвета 
  • свойства фона
  • свойства margin
  • свойства padding
  • свойства border
  • text-decoration
  • vertical-align (только если "float" имеет значение "none")
  • text-transform
  • line-height
  • float
  • clear

Псевдоэлементы и CSS-классы

Псевдоэлементы можно комбинировать с CSS-классами:

p.article:first-letter {color:#FF0000;}

<p class="article">文章段落</p>

Приведённый выше пример сделает первую букву всех абзацев с классом "article" красной.

Несколько псевдоэлементов

Несколько псевдоэлементов можно использовать вместе.

В следующем примере первая буква абзаца будет отображаться красным цветом с размером шрифта xx-large. Остальной текст в первой строке будет синим и отображаться малыми прописными.

Остальной текст в абзаце будет отображаться с размером и цветом шрифта по умолчанию:

Пример

p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }

Попробуйте сами »

CSS — псевдоэлемент :before

Псевдоэлемент «:before» может вставлять новое содержимое перед содержимым элемента.

В следующем примере изображение вставляется перед каждым элементом <h1>:

Пример

h1:before { content:url(smiley.gif); }

Попробуйте сами »

CSS — псевдоэлемент :after

Псевдоэлемент «:after» может вставлять новое содержимое после содержимого элемента.

В следующем примере изображение вставляется после каждого элемента <h1>:

Пример

h1:after { content:url(smiley.gif); }

Попробуйте сами »

Все псевдоклассы/элементы CSS

Селектор Пример Описание примера
:link a:link Выбирает все непосещённые ссылки
:visited a:visited Выбирает все посещённые ссылки
:active a:active Выбирает активную ссылку
:hover a:hover Состояние, когда указатель мыши наведён на ссылку
:focus input:focus Выбирает элемент, получивший фокус после ввода
:first-letter p:first-letter Выберите первую букву каждого элемента <p>.
:first-line p:first-line Выбирает первую строку каждого элемента <p>
:first-child p:first-child Селектор соответствует элементам <p>, которые являются первым дочерним элементом любого элемента.
:before p:before Вставляет содержимое перед каждым элементом <p>
:after p:after Вставляет содержимое после каждого элемента <p>
:lang(язык) p:lang(it) Выберите начальное значение для атрибута lang элемента <p>.
Другие расширения