The ::Before Pseudo-Element

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

HTML file:	Displayed by browser:
<style> h1::before { content: url(../html_beg/images/smiley.gif); } </style> <body> <h1>This is a heading</h1> <p>The ::before pseudo-element has been applied, which inserts content before the content of the element.</p> <hr /> <h2>This is a smaller heading</h2> <p>There is no ::before pseudo-element applied to this element at all.</p> </body>	This is a heading The ::before pseudo-element has been applied, which inserts content before the content of the element. This is a smaller heading There is no ::before pseudo-element applied to this element at all.

HTML file:

Displayed by browser:

<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element has been applied, which inserts content before the content of the element.</p>
<hr />
<h2>This is a smaller heading</h2>
<p>There is no ::before pseudo-element applied to this element at all.</p>
</body>

This is a heading

The ::before pseudo-element has been applied, which inserts content before the content of the element.

This is a smaller heading

There is no ::before pseudo-element applied to this element at all.

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