CSS - The ::After Pseudo-Element

The ::after pseudo-element can be used to insert some content after the content of an element. The following example inserts an image after the content of an <h1> element:

HTML file:	Displayed by browser:
<style> h1::after { content: url(../html_beg/images/smiley.gif); } </style> <body> <h1>This is a heading</h1> <p>The ::after pseudo-element inserts content after the content of an element.</p> <hr /> <h2>This is a smallerheading</h2> <p>This has no ::after pseudo-element applied to it.</p> </body>	This is a heading The ::after pseudo-element inserts content after the content of an element. This is a smaller heading This has no ::after pseudo-element applied to it.

HTML file:

Displayed by browser:

<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<hr />
<h2>This is a smallerheading</h2>
<p>This has no ::after pseudo-element applied to it.</p>
</body>

This is a heading

The ::after pseudo-element inserts content after the content of an element.

This is a smaller heading

This has no ::after pseudo-element applied to it.

Note: IE8 supports the content property only if a !DOCTYPE is specified.