::before CSS Pseudo Element

Description

The ::before pseudo-element is used to display the desired text before the content of the element to which it is added. Works in conjunction with the content property.

For ::before the following features are characteristic.
1. When adding ::before to a block element, the value of the display property can only be: block, inline, none, marker. All other values will be treated as block.
2. When adding ::before to an inline element, display is limited to inline and none. All others will be perceived as inline.
3. ::before inherits the style from the element to which it is added.

Syntax

element::before { content: "text" };

Example

HTML

<ul>

   <li>Adelaide</li>

   <li>Melbourne</li>

   <li>Sydney</li>

   <li>Brisbane</li>

   <li>Perth</li>

</ul>

CSS

li::before {

   content: "→ ";

} 

li {

   list-style: none;

   color: blue;

}

Result

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.