Export (0) Print
Expand All

::after pseudo-element

Defines generated content that functions as a virtual last-child of the matched element.

CSS 2.1, Section 5.12.3Internet Explorer 8



sel::after {...}



A simple selector.

Standards information


The ::before and ::after pseudo-elements create virtual first and last children within an element in the document tree. The content attribute, in conjunction with these pseudo-elements, specifies what is inserted.

The generated content interacts with other boxes as if they were real elements inserted just inside their associated element. The content box of the associated element expands to include the generated content, if necessary. Other specified styling properties apply to the appearance of the inserted content, not to the element's content.

In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :after.

Beginning with Windows Internet Explorer 9, the ::after pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::after pseudo-element. For more information, see the Pseudo-elements section of the W3C's CSS3 Selectors specification.


The following style rules insert curly braces before and after each occurrence of h1 in the document tree. The curly braces will be displayed in brown on a light blue background; the element itself will remain unchanged.

h1::before {
  content: "{ ";
  color: brown;
  background: lightblue;
h1::after {
  content: " }";
  color: brown;
  background: lightblue;

In the image below, you can see the curly braces before and after the h1.

An h1 element with curly braces surrounding it

   <h1>Lorem ipsum dolor sit amet</h1>

See also




© 2014 Microsoft