CSS ::after Pseudo Element

CSS ::after Pseudo-Element 

The ::after pseudo-element allows you to insert content after an element without modifying the HTML.

1. Basic Usage

✅ Adding Text After an Element

p::after {
  content: " 🔥";
  color: red;
}

✅ Adds a fire emoji after every <p> element.

2. Adding Icons or Symbols

button::after {
  content: " →";
  font-weight: bold;
}

✅ Adds a right arrow after every <button>.

3. Styling with CSS

You can style the ::after content just like any other element.

h1::after {
  content: "";
  display: block;
  width: 50px;
  height: 5px;
  background-color: blue;
  margin-top: 5px;
}

✅ Creates a blue line under every <h1>.

4. Using ::after for Decorative Effects

✅ Underline Effect

a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: red;
  transition: width 0.3s;
}

a:hover::after {
  width: 50%;
}

✅ The underline shrinks on hover.

5. Creating Tooltips with ::after

.tooltip:hover::after {
  content: "Tooltip Text";
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

✅ Shows a tooltip when hovering.

6. When to Use ::after?

✔ Add decorative elements
✔ Enhance UI without extra HTML
✔ Create tooltips, icons, or effects