CSS ::before pseudo-element

Definition and usage

CSS ::before Pseudo-elements are used to insert some content before the specified element's content.

Usage content The attribute specifies the content to be inserted. The value of content can be:

• String: content: "Hello world!";
• Image: content: url(myimage.jpg);
• No content: content: none;
• Counter: content: counter(li);
• Quotation marks: content: open-quote;
• Attribute value: content: " (" attr(href) ")";

Tip:Note that the content inserted is still within the specified element. The inserted content will be added before the other content inside the element.

Usage ::after Insert some content after the content of a specific element.

Example

Example 1

Insert a string before the content of each <p> element:

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

Try it yourself

Example 2

Insert a string before the content of each <p> element and set the style of the inserted content:

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

Try it yourself

CSS syntax

::before {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version that fully supports this pseudo-element.

Related pages

Tutorial:CSS pseudo-element

Reference:CSS ::after pseudo-element