Псевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Например, объектная модель документа не предлагает удобного механизма для доступа к первому символу текста, поэтому псевдоэлементы позволяют изменить стиль недоступного иным образом элемента. Синтаксис использования псевдоэлементов следующий. Селектор:Псевдоэлемент { Описание правил стиля } Вначале следует имя селектора, затем пишется двоеточие, после которого идет имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже. .foo:first-letter { color: red }
.foo:first-line {font-style: italic} Замечание Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей. Далее перечислены все псевдоэлементы, их описание и свойства. afterПрименяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, который определяет содержимое для вставки. В примере 17.1 показано использование псевдокласса after для добавления текста в конец абзаца. Пример 17.1. Применение псевдоэлемента after <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
P.new:after {
content: " - Новьё!"
}
</style>
</head>
<body>
<p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>
</body>
</html> В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением параметра content. Замечание Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer ни в одной его версии. beforeПо своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента. В примере 17.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдокласса before. Пример 17.2. Использование псевдоэлемента before <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
UL {
padding-left: 0px;
list-style-type: none
}
LI:before {
content: "\20aa "
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>
</body>
</html> Результат примера показан ниже. - Чебурашка
- Крокодил Гена
- Шапокляк
- Крыса Лариса
В данном примере псевдокласс before устанавливается для селектора LI определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода. first-letterОпределяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал. Замечание Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста.
Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста. Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 17.3). Пример 17.3. Использование псевдоэлемента first-letter <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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> Результат примера показан ниже. Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста. first-lineОпределяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. Замечание К псевдоэлементу first-line могут применяться не все стилевые свойства. Допустимо использовать параметры, относящиеся к шрифту, изменению цвет текста и фона, а также:clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing. В примере 17.4 показано использование псевдоэлемента first-line применительно к абзацу текста. Пример 17.4. Выделение первой строки текста <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
P:first-line {
color: red;
font-style: italic
}
</style>
</head>
<body>
<p>Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.</p>
</body>
</html> Результат примера показан ниже. Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно. В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
| 
