CODESCRACKER

CSS ::after - Add Content after a Specified Element

The CSS ::after pseudo-element is used when we need to add some content right after the content of a selected element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p::after {content: ".";}
   </style>
</head>
<body>

   <p>This is first para</p>
   <p>This is second para</p>

</body>
</html>
Output

This is first para

This is second para

The "style" tag specifies the CSS rules that will be applied to paragraph elements. The "p::after" selector targets the pseudo-element that follows each "p" element. It will choose the end of the paragraph element in this case.

After that, the "content" property is used to specify what content should be added after each "p" element. It is a period (".") in this case.

We can add content to an element without changing the HTML code by using the "::after" pseudo-element. This can be useful for adding decorative elements or formatting to text without changing the HTML's semantic structure.

Therefore, in short, in the above example, after applying the following CSS code:

p::after {content: ".";}

The text inside each and every P element will be ended with a dot or a full stop (.)

Note: Just like CSS ::before, we can also add an image after the content of a specified element, using CSS ::after, of course.

It is worth noting that "::after" is used instead of ":after" to indicate that it is a pseudo-element rather than a pseudo-class. According to the W3C specification, the double colon syntax is preferred for pseudo-elements. Some older browsers, however, may not support this syntax and will instead require the single colon syntax.

CSS ::after syntax

The syntax of the "::after" pseudo-element in CSS is:

selector::after {
   content: "content to add after the element";
   // other styles to apply
}

Advantages of the "::after" pseudo-element in CSS

Disadvantages of the "::after" pseudo-element in CSS

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!