0Pricing
CSS Academy · Lesson

::before and ::after Content

Insert generated content before or after elements using ::before and ::after with the content property.

What are Pseudo-elements?

Pseudo-elements create virtual elements that are styled as if they were part of the DOM. They use double colons ::. The most used are ::before and ::after.

::before and ::after

::before inserts generated content before an element's content. ::after inserts it after. Both require the content property to render.

.element::before {
  content: ""; /* required even if empty */
  display: block;
}

.element::after {
  content: "→";
}

All lessons in this course

  1. ::before and ::after Content
  2. ::placeholder ::selection and ::marker
  3. CSS Counters with ::before
  4. Decorative Patterns with Pseudo-elements
← Back to CSS Academy