before

Вы можете приобрести локальную версию справочника по CSS в формате CHM или HTML

Браузер	Internet Explorer				Netscape		Opera				Safari			Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Краткая информация

CSS	CSS2
Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам
Аналог HTML	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.html#before-and-after

Описание

Псевдоэлемент before применяется для отображения желаемого контента до элемента, к которому он добавляется. Псевдоэлемент before работает совместно с атрибутом content.

Для before характерны следующие особенности.

При добавлении before к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
При добавлении before к встроенному элементу, значение display ограничено аргументами inline и none. Все остальное будет восприниматься как inline.
Стилевые свойства before наследуются от элемента, к которому он добавляется.

Синтаксис

Элемент:before { content: "текст" }

Аргументы

Нет.

Пример

HTML 4.01CSS 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 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=windows-1251">
  <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>

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

Рис. 1

Рис. 1. Использование параметра before в списках