::after

::after is a generated content element that represents a styleable abstract last child of the respective element.

The content inserted using ::after is inserted after other content inside the element and is displayed inline by default. The value of the content is specified using the content property.

For example, suppose you want to add a small icon to all links that link to pages on websites other than the one the reader is reading. It is usually a good idea to add a small icon that tells the readers that the link they’re about to click will take them to another domain. Such an icon can be added before or after the content of the link. It is common to add it after the content, so that’s what we’re going to do—using ::after we’re going to insert the small icon () after the content of all links on a page that have a class name .external.

Let's <a href="http://movethewebforward.org/" class="external">Move The Web Forward</a> together!
                

The following snippet will add the icon to the links. The icon will be inserted inline after the content of the link.

.external::after {
    content: url(external-link.png);
    padding-left: 5px; /* create some space between the image and the content before it */
}
                

The image is added using the content property. Images inserted using pseudo-elements cannot be resized. They are inserted as is, so you will have to size your image before you use it.

The result of the above code is the following:

Because the content inserted using a pseudo-element is not inserted into the DOM, it would normally not be possible to see and inspect the inserted content using a browser’s dev tools. However, Chrome 32+ and Firebug for Firefox allow you to see the pseudo-element’s position in the DOM, and by selecting it you can view the styles associated with it in the CSS panel. Inspecting the above demo in Chrome’s dev tools shows the following result:

The above demo also shows that the content added with ::after is positioned inline with and after the rest of the content inside the blockquote.

Since ::after content is inserted after other content inside an element, this also means that the pseudo-element will be stacked on top of other elements that come before it in the source tree.

A pseudo-element can be used to insert almost any kind of content, including characters (as above), strings of text, and images. For example, the following are all valid ::after declarations with valid content:

.element::after {
    content: url(path/to/image.png); /* an image, for example, an icon */
}

.element::after {
    content: "(To be continued...)"; /* a string */
}

.element::after {
    content: "\201C"; /* also counts as a string. Escaping the unicode; renders it as a character */
}
                

The content of ::after can also be a counter, and it can also be left empty.
Empty pseudo-elements are useful for clearing floats in an element. For example, the micro clearfix hack by Nicolas Gallagher uses ::after and ::before to clear the floats inside float containers. You can read more about clearing floats and how the hack works in the float entry.

The pseudo-element ::after can also be styled just like any other content—it can be floated, positioned, and even animated. (Animating pseudo-elements is not possible in all browsers. See the browser support section below for more information.)

The ability to style pseudo-elements as if they were real elements on the page led to using them mostly for “cosmetic” purposes. Pseudo-elements are heavily used to created geometric shapes in CSS, among many other use cases. A demonstration of that can be seen in the following demo. An eight-point star can be created using an element and its pseudo-element. The first four points are created from the element itself made into a square. Then, the element’s pseudo-element is styled to get the same height and width as its parent, it is positioned absolutely on top of its parent, and then rotated by 45 degrees, forming an eight-point star.

/* 
    The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo. 
    By removing the opacity values, you can see a fully opaque eight-point star 
*/
.element {
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    position: relative;
    margin: 100px auto;
}

.element:after {
    content: "";
    position: absolute;
    display: block;
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    transform: rotateZ(45deg);
}
                

Since the pseudo-element is used as a cosmetic element only, its content can be left empty.

This demo can also be created similarly using the ::before pseudo-element.

Trivia & Notes

Different notations: (:) and (::)

You will most likely come across (or have come across) the notation :after which uses one colon instead of two.

In CSS1 and CSS2, pseudo-elements were defined to start with one colon (:), just like pseudo-classes (for example :hover). In CSS3, the double colon notation (::) was introduced for pseudo-elements in order to differentiate them from pseudo-classes.

/* old CSS2 syntax */
.element:after {
    /* content and styles here */
}

/* new CSS3 syntax */
.element::after {
    /* content and styles here */
}
                

All browsers that support the two-colon notation also support the one-colon notation. Internet Explorer 8, however, does not support the two-colon notation. So, unless you need to support Internet Explorer 8, you can use the two-colon notation without having to worry about browser support.

In all the demos in this entry, the one-colon syntax is used to provide wider browser support for readers viewing the demos in IE8.

Accessibility

Content added using pseudo-elements is not inserted into the DOM—it is only visually displayed. Hence, screen readers won’t be able to access and read the content generated using pseudo-elements. So, it is recommended that you don’t use pseudo-elements to insert vital content into a page (such as footer notes that are relevant to the article, for example).

Pseudo-elements are mostly used to insert and style cosmetic content, and should not be relied on to insert content that is relevant to the meaning and completeness of the content on the page.

Also, since the content inserted using pseudo-elements is not inserted into the DOM, this means that you cannot attach any event handlers to it using JavaScript.