Internet Explorer |
||||||||||||||
| 6.0 | 7.0 | 8.0 | 2.0 | 3.0 | 4.0 | 9.2 | 9.6 | 10 | 2.0 | 3.1 | 4.0 | 2.0 | 3.0 | 3.6 |
| Применяется | Ко всем элементам |
|---|---|
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#before-and-after |
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Псевдоэлемент :before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content.
Для :before характерны следующие особенности.
элемент:before { content: "текст" }
Нет.
Пример
HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0
<!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>before</title>
<style type="text/css">
li:before {
content: "¶ "; /* Добавляем желаемый символ перед элементом списка */
}
li {
list-style: none; /* Убираем исходные маркеры */
}
</style>
</head>
<body>
<ul>
<li>Альфа</li>
<li>Бета</li>
<li>Гамма</li>
</ul>
</body>
</html>
В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента :before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Рис. 1. Использование псевдоэлемента :before в списках
Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <PRE>.
Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <FIELDSET>.
Copyright 2002–2010 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект