::before CSS Pseudo Element


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.


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


li::before {
content: "→ ";
li {
list-style: none;
color: blue;


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

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 25th November 2019