Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:after

[CSS Selector] E:after

Using 'selector:after', you can generate the last child element of an element. This is commonly called the ':after pseudo-element'. It does not work in IE7 or earlier.

When generating a ':after pseudo-element', the 'content' property is required. Without a 'content' property, the ':after pseudo-element' will not be generated. If you want to generate a ':after pseudo-element' without any text content, pass an empty string to the 'content' property.

Sample Code

style.css

/* Append text after the element */
div:after { content: "Hello World";}

/* No content property — the pseudo-element is not generated */
p:after {}

/* Use an empty string to create a decoration-only pseudo-element */
div.div1:after { content: ""; display: block; height: 10px; background-color: red;}

/* Clearfix: clear floats after the element */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* Add a decorative line below a heading */
h2.decorated:after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background-color: #0077cc;
	margin-top: 8px;
}

/* Append an arrow to list items */
li.arrow:after { content: " ▶";}

/* Mark required fields with an asterisk */
label.required:after { content: " *"; color: red;}

Browser Result

div:after { content: "Hello World";} /* Generates a ':after pseudo-element' containing the text "Hello World". */
p:after {} /* No 'content' property is specified, so the ':after pseudo-element' is not generated. */
div.div1:after { content: ""; display: block; height: 10px; background-color: red;} /* To output no text, pass an empty string like this. */

<div> The ':after pseudo-element' is being generated.</div>
<p>The ':after pseudo-element' is not generated because the 'content' property is not specified.</p>
<div class="div1">A red line is being generated using the ':after pseudo-element'.</div>

The default 'display' property value of the ':after pseudo-element' is 'inline'.

Note that the ':after pseudo-element' is generated not after the specified element, but at the position of the last child element inside the specified element.

<p>

<!-- The ':after pseudo-element' is generated around here. -->
</p>
<!-- Not here -->

Browser Support

Desktop

Chrome

1+ ○

Firefox

1.5+ ○

Safari

4+ ○

3 and earlier ×

Edge

12+ ○

11 ○

10 ○

9 ○

8 △

7 ×

6 ×

Opera

7+ ○

6 △

5 △

4 △

Supported as ':after'

3 and earlier ×

Mobile

iOS Safari

3.2+ ○

2 and earlier ×

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop version.

Firefox Android

Latest ○

Same support as desktop version.

* Version information is based on MDN.

If you find any errors or copyright issues, please contact us.

Home