CSS ::after (:after) Selector

a::after {
  content: " ☞"
}

Meaning

The ::after (:after) selector sets a style to be used immediately following the element. It is inline by default.

This pseudo-element is used in conjunction with the content property, and additional properties can be specified to style it.

Note that the generated content is only rendered it doesn’t become part of the document.

Note ::after selector is same as :after changed under CSS3 to make pseudo-elements obvious.

Version: :after CSS2, ::after CSS3

Standard Syntax

::after (:after) {
  css declarations;
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

More Example:

The following example create tooltip uses ::after, in conjunction with the attr() CSS expression and a data-tooltip custom data attribute, to create tooltips. No JavaScript is required!

We can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a CSS :focus selector.

<p>The <span tabindex="0" data-tooltip="HyperText Markup Language">HTML</span> is the standard markup language for documents designed to be displayed in a web browser.</p>

<p>The <span tabindex="1" data-tooltip="Cascading Style Sheets">CSS</span> is a way to change the look of HTML and XHTML web pages.</p>

span[data-tooltip] {
  position: relative;
  text-decoration: underline;
  color: #1A73E8;
  cursor: help;
}

span[data-tooltip]:hover::after,
span[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaa solid;
  border-radius: 4px;
  background-color: #ffc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

Adding Quotation Marks

The following example add quotation marks using ::after pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters:

q::after {
  content: "»";
  color: red;
}

q::before {
  content: "«";
  color: blue;
}