::before and ::after

Create generated boxes for decoration while keeping meaningful content in HTML.

Two generated decorations

Before the content

The purple edge is an empty ::before box positioned at the card's left side.

After the content

The gold circle is an empty ::after box anchored at the lower-right corner.

content is required

A pseudo-element does not generate a box without content. Use content: "" for a purely decorative shape.

Do not put essential labels, instructions, status messages, or controls only in generated content. The card headings and explanations above remain in the HTML.

Important HTML

Pseudo-elements attach to a real host element.

<article class="card">
  <h3>…</h3>
  <p>…</p>
</article>

Important CSS

Generated boxes need content to appear.

.card::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  background: #7c3aed;
}