CSS ::after Selector

CSS ::after selector allows you to insert extra content just after the actual content of a selected element. To add this extra content after the element we use the content property in combination with the ::after selector.

The content that we insert using the ::after selector is placed just after the element’s actual content. However, this extra content is not a part of the DOM but appears on the page as if it is.

In the following example, we are adding an extra text ” – Awesome” just after the actual content of each paragraph. See how it works:

Example:

p::after{
   content: ' - Awesome';
}

You can also apply CSS styles to this extra content just like a normal element.

See this example:

Example:

p::after{
   content: ' - Awesome';
   background-color: yellow;
   font-style: italic;
}

Ok, So now we have learned the basic concept of adding some extra text just after the element’s actual content.

But the text is not the only thing that you can insert after the element. You can also insert images, gradients, counters etc.

Here is the list what all types of content you are allowed to insert after the element:

• A String – such as, “Hello world”. To insert the special characters you have to use their encoded form. For example, to insert a copyright symbol, you can use ‘\000A9’.
• An Image – such as, url(path/to/the/image.jpg). You can also insert the gradients as they are also images.
• A Counter – such as, counter(mycounter). This will allow you to insert a number after the element as its count.
• A Blank String – such as, “”. This is generally used to add some decoration stuff for the element such as partial borders, box-shadows, etc.

Let’s understand each of these with the help of live examples.

The first point i.e. the string insertion not only adds the text but anything that can be copied and placed inside the “”. For example, you can add any of these ✪, ✱, ★, 💛 emojis as a string by simply copying and pasting into the content property.

In the following example, we have inserted a 💛 emoji after each paragraph.

Example:

p::after{
    content: '💛';
}

You can also insert the special characters by simply using their equivalent Unicode entity.

Here is an example where we have inserted a copyright symbol after each paragraph by simply using its Unicode equivalent:

Example:

p::after{
    content: '\000A9';
}

We can also insert images after the content of an element using the ::after selector. However, these images load in their original size and you can not resize them in the ::after selector.

Here is an example which inserts an image after the actual content of each paragraph:

Example:

p::after{
    content: url(images/star.jpg);
}

It is also possible to insert a counter after an element.

In case you don’t know, with the help of the counter-reset and counter-increment properties we can define a custom counter which will automatically increment on each occurrence of the specified element.

In the following example we have added a custom counter after each paragraph element:

Example:

body{
  counter-reset: myCounter; /* sets myCounter to 0 */
}
p::after{
  counter-increment: myCounter; /* Increments myCounter by 1 */
  content: counter(myCounter);
}

This last example is all about inserting a blank text after the element and using it to decorate the actual content of the element such as creating a partial border.

See the below div element, it has a partial red color bottom border which is made using the ::after selector.

And this is how we did it using the ::after Selector:

Example:

p::after{
    content: '';
    position: absolute;
    border-bottom: 2px solid red;
    bottom: -3px;
    left: 0;
    width: 10%;
}

CSS Syntax

The syntax of the ::after selector is as follows:

::after{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the ::after selector.