CSS ::after Pseudo Element

❮ Prev Next ❯

In CSS, ::after creates a pseudo-element that is the selected element’s last child. It is a generated content element that adds any kind of content after the content. It can be used to insert any kind of content, including characters, strings of text, and 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 one colon notation :after which is supported by all browsers as well.

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

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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

::after {
  css declarations;
}

Example of the ::after pseudo-element:

<!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>