::after CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

Editor

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.