CSS :before Selector

Complete CSS Reference Complete CSS Reference

Example

How to insert content before all <p> elements:

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

Try it yourself »

Definition and Usage

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

Use the CSS content property to specify the content.

Read more about the content property in our content property reference.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The :before selector is supported in all major browsers.

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

CSS Version

The :before selector was first introduced in:

CSS 2

Related Pages

CSS tutorial: CSS Pseudo-elements

CSS Selector Reference: CSS :after selector

Examples

Try it Yourself - Examples

Example

Style the inserted content:

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

Try it yourself »
Complete CSS Reference Complete CSS Reference