before

Browser Internet Explorer Netscape Opera Safari Firefox
Version 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
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value No
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/selector.html#before-and-after

Description
Pseudo element before works in conjunction with the attribute content and it is used for wanting content display.
There 3 following features of this parameter.
1. When you add before to the block element, there are following destinations of display features: block, inline, none, marker. Otherwise all the destinations will be «block»
2. When you add before to the integral element, in that case destination display will be restricted by arguments inline and none. Otherwise all the arguments will be inline.
3. When before is added to the element, it inherits his features.

Syntax

Element:before { content: "text" }

Arguments
No

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!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: "¶ "; /* Add the symbol you want before the list's element */ 
   }
   li {
     list-style: none; /* Remove primary markers */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Alfa</li>
     <li>Beta</li>
     <li>Gamma</li>
   </ul>
 </body>
</html>

The result of this example is shown on the figure 1