CSS ::after pseudo-element

Definition and usage

CSS ::after Pseudo-elements are used to insert some content after the content of the specified element.

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: close-quote;
• Attribute value: content: " (" attr(href) ")";

Tip:Please note that the content inserted is still within the specified element. The inserted content will be added after the other content inside the element.

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

Example

Example 1

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

p::after {
  content: " - Remember this";
}

Try it yourself

Example 2

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

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

Try it yourself

CSS Syntax

::after {
  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 ::before pseudo-element