CSS ::before Pseudo-element
Example
Insert a string 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 pseudo-element inserts some
content before the content of the specified element.
Use the content property to specify the content to insert. The content value can be:
- A string: content: "Hello world!";
- An image: content: url(myimage.jpg);
- Nothing: content: none;
- A counter: content: counter(li);
- A quote: content: open-quote;
- An attribute value: content: " (" attr(href) ")";
Tip: Notice that the inserted content is still inside the specified element. The inserted content is added before the other content inside.
Use ::after to insert some content after the content of the specific element.
| Version: | CSS2 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-element.
| Pseudo-element | |||||
|---|---|---|---|---|---|
| ::before | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS Syntax
::before {
css declarations;
}
More Examples
Example
Insert a string before the content of each <p> element, 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 Pseudo-element Reference: ::after
