0Pricing
CSS Academy · Lesson

Decorative Patterns with Pseudo-elements

Build decorative shapes, dividers, and overlays using ::before and ::after without extra HTML.

Pure CSS Decoration Philosophy

Pseudo-elements allow rich decorative effects without extra HTML. The goal: zero divs for decoration — all visual embellishment goes in CSS.

CSS Triangle

Create triangles using zero-size elements with transparent borders:

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid royalblue;
}

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