content

style.css

/* no content (initial value) */
div.test:after { content: none;}

/* normal display (used to reset ::before/::after) */
div.test1:after { content: normal;}

/* insert text */
div.test2:after { content: "Insert text";}

/* insert an image */
div.test3:after { content: url(/img/sample.jpg);}

/* empty string (used in clearfix, etc.) */
.clearfix::after { content: ""; display: table; clear: both;}

/* add an external link indicator after links */
a[target="_blank"]::after { content: " ↗";}

/* insert the href attribute value after links */
a::after { content: " (" attr(href) ")";}

/* add an asterisk before required field labels */
.required::before { content: "* "; color: red;}

/* auto-numbering with a counter */
.list-item::before { content: counter(item) ". "; counter-increment: item;}

<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+ ○

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>