W3docs
en
Log in

CSS ::after Pseudo Element

Use the ::after CSS pseudo-element for adding elements after the content. Read about the pseudo-element and try examples.

In CSS, ::after creates a pseudo-element that is the selected element’s last child. It generates content that appears after the element's original content. It can be used to insert characters, strings of text, or images.

The value is defined by the content property.

By default, the ::after pseudo-element is inline.

It can be animated, positioned or floated like any other content.

The ::after pseudo-element can also be used with the single-colon notation :after, which is supported by all browsers.

The ::before pseudo-element adds content before any other content, whereas the ::after pseudo-element adds content after any other content in HTML.

Info

The pseudo-elements that are created with ::after and ::before do not apply to replaced elements (e. g., <br>, <img>).

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntax

CSS ::after Pseudo Element

::after {
  css declarations;
}

Example of the ::after pseudo-element:

CSS ::after example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>
Try it Yourself »

In the following example, styles can be added to the content.

Example of the ::after pseudo-element with styled content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
        background-color: #eee;
        color: #1c87c9;
        padding: 5px 3px;
        border: 2px dashed #000;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>
Try it Yourself »

Practice

Practice

What does the ::after pseudo-element in CSS do?