CSS

::before

Selector

Example

Insert some text before the content of each <p> element:

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

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

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

Use the content property to specify the content to insert.

Use the ::after selector to insert something after the content.

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
3.5
3.1
7.0

CSS Syntax

::before {
  css declarations;
}

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