Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > after Pseudo-class

---

Represents a child pseudo-element immediately after the originating element’s actual content.

selector::after { content: value;
   property: value; }

property	Any valid CSS property.
value	Any of the range of values available to the corresponding property.

The ::after pseudo-class generates a pseudo-element that is the last child of the selected element.

It is often used to add custom content to an element via the content property, such as icons, tooltips, or other cosmetic decoration.

The syntax for using the ::after pseudo-class is straightforward. A selector immediately precedes the pseudo-class.

For example, to add content after the selected element:

.cool::after { content: url( "/shared/images/cool.gif" ) }

The following demonstrates use of the ::after pseudo-class in an embedded stylesheet to add content after an element.

• 5.12.3. The :before and :after pseudo-elements
• 4.1. Generated Content Pseudo-elements: ::before and ::after

::before