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

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

p::first-letter { color: red }

Далее перечислим наиболее распространённые псевдоэлементы.

::first-letter

Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

::first-letter будет работать только для блочных текстовых элементов вроде <div> и <p>.

Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору p псевдоэлемент ::first-letter и установить желаемый стиль буквы. В частности, увеличить размер текста и поменять его цвет (пример 1).

Пример 1. Использование ::first-letter

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоэлементы</title>
  <style>
   p {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
   }
   p::first-letter {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 2em; /* Размер первой буквы */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее 
   как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь 
   и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую 
   завесу из мрака и пыли.</p>
  <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого 
   не было, и лишь на полу валялась порванная туфля Паши.</p>
 </body>
</html>

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста. Результат примера показан на рис. 1.

Создание выступающего инициала

Рис. 1. Создание выступающего инициала

::first-line

Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и др.

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

В примере 2 показано использование псевдоэлемента ::first-line применительно к абзацу текста.

Пример 2. Выделение первой строки текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоэлементы</title>
  <style>
   p::first-line {
    font: bold 16px Arial, sans-serif;
    color: navy;
   }
  </style>
 </head>
 <body>
  <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее 
   как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь 
   и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую 
   завесу из мрака и пыли.</p>
 </body>
</html>

Результат примера показан на рис. 2.

Результат применения псевдоэлемента ::first-line

Рис. 2. Результат применения псевдоэлемента ::first-line

В данном примере первая строка выделяется синим цветом и жирным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остаётся постоянным, независимо от числа входящих в неё слов.

::after

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

В примере 3 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.

Пример 3. Применение ::after

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоэлементы</title>
  <style>
   .new::after {
    content: " - Новьё!"; /* Добавляем после текста абзаца */
    color: red; /* Красный цвет текста */
    font-style: italic; /* Курсивное начертание */
   }
  </style>
 </head>
 <body>
  <p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
  <p>Метод ловли льва простым перебором.</p>
 </body>
</html>

Результат примера показан на рис. 3.

Добавление текста к абзацу с помощью ::after

Рис. 3. Добавление текста к абзацу с помощью ::after

В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content.

::before

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

Не у всех элементов есть собственное содержимое, поэтому ::after и ::before не дают результата для <img>, <input> и ряда других элементов.

Пример 4. Использование ::before

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоэлементы</title>
  <style>
   ul {
    list-style: none; /* Прячем маркеры списка */
   }
   li::before {
    content: "✿"; /* Добавляем символ */
    padding-right: 7px; /* Расстояние от текста до маркеров */
    color: red; /* Красный цвет маркеров */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
   <li>Крыса Лариса</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 4.

Изменение вида маркеров с помощью ::before

Рис. 4. Изменение вида маркеров с помощью ::before

В данном примере псевдоэлемент ::before устанавливается для селектора li и определяет маркеры списка. Добавление желаемых символов происходит путём задания значения свойства content.

Перейти к заданиям

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 13.08.2017
Редакторы: Влад Мержевич