::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
9	12	1	1.5	7	4
Tablets / Mobile
≤37	18	4	10.1	5.1	1.0

Last updated by CSSPortal on: 25th November 2019