0
0
CSSmarkup~5 mins

After pseudo-element in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The ::after pseudo-element lets you add content right after an element without changing the HTML. It helps decorate or add extra info easily.

Adding icons or symbols after links or buttons for clarity.
Inserting decorative elements like quotes or lines after paragraphs.
Showing extra text or labels after headings without editing HTML.
Adding visual effects like arrows or badges after menu items.
Syntax
CSS
selector::after {
  content: "your content";
  /* other styles */
}

The content property is required; without it, nothing shows.

Use double colons ::after for modern CSS, but single colon :after also works for compatibility.

Examples
Adds a link icon after every link.
CSS
a::after {
  content: " 🔗";
}
Adds italic gray text after paragraphs.
CSS
p::after {
  content: " -- end of paragraph";
  font-style: italic;
  color: gray;
}
Adds a black line below headings as a decorative underline.
CSS
h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: black;
  margin-top: 0.5rem;
}
Sample Program

This code adds a green checkmark after the "Submit" button text using the ::after pseudo-element.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>After Pseudo-element Example</title>
  <style>
    button::after {
      content: " [check]";
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <button>Submit</button>
</body>
</html>
OutputSuccess
Important Notes

The ::after element is inline by default. Use display to change layout if needed.

It does not add real HTML content, so screen readers may not read it. Use carefully for accessibility.

Summary

::after adds content after an element without changing HTML.

You must set content for it to show anything.

Great for decoration, icons, or extra info in a simple way.