::after CSS Pseudo Element

Description

The CSS ::after pseudo element is used to insert content after an element. It is often used to add cosmetic content to an element, such as a colon after a heading or a chevron after a button.

To use the ::after pseudo element, you simply add it to the end of a CSS selector, followed by the content you want to insert. For example, to add a colon after all headings, you would use the following CSS:

h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {

  content: ":";

}

You can also use the ::after pseudo element to create more complex effects. For example, you could use it to create a drop-down arrow next to a button, or a tooltip that appears when a user hovers over an element.

Here is an example of how to use the ::after pseudo element to create a drop-down arrow next to a button:

.button::after {

  content: "";

  position: absolute;

  top: 50%;

  right: 10px;

  transform: translateY(-50%) rotate(90deg);

  width: 10px;

  height: 10px;

  border-style: solid;

  border-width: 2px 2px 0 0;

  border-color: currentColor;

}

This CSS will create a small triangle after the button, which will rotate 90 degrees when the user hovers over the button.

The ::after pseudo element is a very versatile tool that can be used to create a wide variety of effects. It is a great way to add extra polish and functionality to your web pages.

Syntax

element::after { content: "text" }

Example

HTML

<p class="new-text">New content is being added to CSSPortal.</p>

<p>Here is some normal text to show that nothing will happen here.</p>

<p class="danger-text">We will try not to delete anything important.</p>

CSS

.new-text::after {

  content: " - COOL!"; 

  color: green;

}

.danger-text::after {

  content: " - WARNING!";

  color: red;

}

Result

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.