content

div.test:after { content: none;}
div.test1:after { content: normal;}
div.test2:after { content: "Insert text";}
div.test3:after { content: url(/img/sample.jpg);}

<style scoped>
    div:after { content: none;}
</style>
<p>The following specifies '<span style="color: #f00;">div:after { content: none;}</span>' for the div element (yellow background).</p>
<div style="background-color: yellow; padding: 10px;"></div>

<style scoped>
    div:after { content: "Insert text";}
</style>
<p>The following specifies '<span style="color: #f00;">div:after { content: "Insert text";}</span>' for the div element (yellow background).</p>
<div style="background-color: yellow; padding: 10px;"></div>

<style scoped>
    div:after { content: url(/dics/dictionary-css/img/sample.jpg);}
</style>
<p>The following specifies '<span style="color: #f00;">div:after { content: url(/dics/dictionary-css/img/sample.jpg);}</span>' for the div element (yellow background).</p>
<div style="background-color: yellow; padding: 10px;"></div>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ×

6 ×

Opera

4+ ○

3 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

Inserts elements such as text strings or images into the ':before pseudo-element' or ':after pseudo-element'. Elements generated using the 'content' property become 'anonymous replaced elements'.

The 'content' property can only be used with ':before pseudo-element' and ':after pseudo-element'. The initial value for elements other than ':before pseudo-element' and ':after pseudo-element' is 'normal' rather than 'none', but since the 'content' property has no effect on such elements, this distinction is generally not a concern.

When using ':before pseudo-element' or ':after pseudo-element' to generate any kind of element, the 'content' property is required. In such cases, it is common practice to specify an empty string like 'content: ""'. If the 'content' property remains at its initial value of 'none', no area is generated at all, so be careful.

div:after { display: block; height: 50px;}

<p>The div element (yellow background) below is trying to add spacing using the :after pseudo-element. However, since the 'content' property is not specified, the :after pseudo-element is not generated and no spacing is created.</p>
<div style="background-color: yellow;">This is a div element. We want to add spacing.</div>

div:after { content: ""; display: block; height: 50px;}

<p>The div element (yellow background) below is trying to add spacing using the :after pseudo-element. Since an empty string is specified for the 'content' property, the :after pseudo-element is generated and spacing is successfully created.</p>
<div style="background-color: yellow;">This is a div element. We want to add spacing.</div>