before

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla 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 (ЦСС)	CSS (ЦСС)2
Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам
Аналог ШТМЛ	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.ШТМЛ#before-and-after

Описание

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

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

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

Синтаксис

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

Аргументы

Нет.

Пример

ШТМЛ 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=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>

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

Рис. 1

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