CSS ::before Selector


Example

Insert content before every <p> element's content:

p::before {
    content: "Read this: ";
}

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The ::before selector inserts content before the content of the selected element(s).

Use the content property to specify the content to insert.

Version: CSS2

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
::before 4.0 9.0
Partial from 8.0
3.5 3.1 7.0
Partial from 4.0

Note: IE8 and Opera 4-6 only support the old, single-colon CSS2 syntax (:before). Newer versions support the standard, double-colon CSS3 syntax (::before).

Note: For :before to work in IE8, a <!DOCTYPE> must be declared.


CSS Syntax

::before {
    css declarations;
}

Examples

More Examples


Example

Insert content before every <p> element's content, and style the inserted content:

p::before {
    content: "Read this -";
    background-color: yellow;
    color: red;
    font-weight: bold;
}

Try it yourself »

Related Pages

CSS tutorial: CSS Pseudo-elements

CSS Selector Reference: CSS ::after selector



SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: