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

©Влад Мержевич

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

Синтаксис использования псевдоэлементов следующий.

Селектор:Псевдоэлемент { Описание правил стиля }

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

.foo:first-letter { color: red }
.foo:first-line {font-style: italic}

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

Далее перечислены все псевдоэлементы, их описание и свойства.

:after

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

Пример 16.1. Применение псевдоэлемента :after

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Псевдоэлементы</title>
  <style type="text/css">
   P.new:after {
    content: " - Новьё!"; /* Добавляем после текста абзаца */
   }
  </style>
 </head>
 <body>
  <p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
  <p>Метод ловли льва простым перебором.</p>
 </body>
</html>
Посмотреть пример
Посмотреть пример

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

Рис. 16.1

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

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

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

:before

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

Пример 16.2. Использование псевдоэлемента :before

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Псевдоэлементы</title>
  <style type="text/css">
   UL {
    padding-left: 0; /* Убираем отступ слева */
    list-style-type: none; /* Прячем маркеры списка */
   }
   LI:before {
    content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
   <li>Крыса Лариса</li>
  </ul>
 </body>
</html>
Посмотреть пример
Посмотреть пример

Результат примера показан ниже (рис. 16.2).

Рис. 16.2

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

В данном примере псевдоэлемент :before устанавливается для селектора LI, определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.

:first-letter

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

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

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

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

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Псевдоэлементы</title>
  <style type="text/css">
   P {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
    font-size: 90%; /* Размер шрифта */
    color: black; /* Черный цвет текста */
   }
   P:first-letter {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 200%; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
    <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее 
    как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила 
    внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака 
    и пыли. </p>
    <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого 
    не было, и лишь на полу валялась порванная туфля Паши.</p>
 </body>
</html>
Посмотреть пример
Посмотреть пример

Результат примера показан ниже (рис. 16.3).

Рис. 16.3

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

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

:first-line

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

К псевдоэлементу :first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align иword-spacing.

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

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

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Псевдоэлементы</title>
  <style type="text/css">
   P:first-line {
    color: red; /* Красный цвет текста */
    font-style: italic; /* Курсивное начертание */
   }
  </style>
 </head>
 <body>
  <p>Интересно, а существует ли способ действительно практичного применения 
  свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, 
  а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых 
  перспектив, после чего остается только сказать себе, что вот это вот, это самое 
  сделать по-другому, также изящно и эффектно просто невозможно.</p>
 </body>
</html>
Посмотреть пример
Посмотреть пример

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

Рис. 16.4

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

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

   Отправить статью как PDF