::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

<ul>
<li>Adelaide</li>
<li>Melbourne</li>
<li>Sydney</li>
<li>Brisbane</li>
<li>Perth</li>
</ul>
li::before {
content: "→ ";
}
li {
list-style: none;
color: blue;
}

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.

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
????5.1?