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

Псевдоэлементы используются для определения стиля определенной части HTML элемента.

Например, псевдоэлементы могут использоваться для:

• определения стиля первой буквы или строки элемента,
• вставки контента перед или после основного содержимого элемента.

Синтаксис

Псевдоэлементы, как и псевдоклассы, "присасываются" к селекторам и имеют следующий синтаксис:

селектор::псевдоэлемент {
  свойство: значение;
}

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

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

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

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

В декларации псевдоэлемента ::first-line допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

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

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

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

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

В декларации псевдоэлемента ::first-letter допустимо использовать только свойства, относящиеся к шрифтам, полям, отступам, границам, цвету и фону.

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

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

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

В приведенном выше примере первая буква абзацев с классом "intro" будет отображаться красным цветом и увеличенным размером шрифта.

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

Для одного элемента можно определять несколько псевдоэлементов.

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

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

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

Псевдоэлемент ::before

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

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

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

Псевдоэлемент ::after

Псевдоэлемент ::after используется, чтобы вставить некий контент после основного содержимого элемента.

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

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

Псевдоэлементы ::before и ::after используются вместе со свойством content, чтобы добавить дополнительный контент, не изменяя код HTML.

Свойство content может принимать следующие значения: open-quote, close-quote, no-open-quote, no-close-quote, любая строка, заключенная в кавычки, или изображение, подключаемое конструкцией url(имя_файла_изображения).

blockquote:before {
   content: open-quote;
}

blockquote:after {
   content: close-quote;
}

li:before {
   content: "POW: "
}

p:before {
   content: url(images/jam.jpg)
}

Псевдоэлемент ::marker

Псевдоэлемент ::marker позволяет определить стили маркера элемента списка. Работает с любым элементом, у которого установлено свойство display: list-item (например, <li> или <summary>).

В следующем примере примере маркеры списка изменят свой размер и станут красными:

li::marker {
  color: red;
  font-size: 23px;
}

Псевдоэлемент ::selection

Псевдоэлемент ::selection определяет стиль для выделенного пользователем текста.

В правилах допускается использовать следующие свойства: color, background, cursor, outline и text-shadow.

В следующем примере выделенный пользователем текст станет красным на желтом фоне:

::selection {
  color: red;
  background: yellow;
}

Двойное двоеточие или одинарное?

Ранее, в CSS2 и CSS1, как для псевдоклассов, так и для псевдоэлементов использовалось одинарное двоеточие (например, :before).

Однако, в CSS3 для того, чтобы различать псевдоэлементы и псевдоклассы для записи псевдоэлементов ввели двойное двоеточие вместо одинарного (например, ::before).

Для обратной совместимости допускается использовать одинарное двоеточие для псевдоэлементов. Большинство браузеров понимает обе записи.