CSS Academy · Lesson

Decorative Patterns with Pseudo-elements

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

Decorative Patterns with Pseudo-elements is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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;
}

Tooltip Arrow

A tooltip arrow using ::before:

.tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #333;
}

Diagonal Section Divider

A slanted section break using skew or clip-path on ::after:

.section::after {
  content: "";
  display: block;
  height: 80px;
  background: white;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  margin-top: -80px;
}

Decorative Underlines

Animated underline effects using ::after:

a {
  text-decoration: none;
  position: relative;
}

a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: royalblue;
  transition: width 300ms ease;
}

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

Badge with ::after

A notification badge overlay without extra HTML elements:

.nav-icon {
  position: relative;
}

.nav-icon::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  right: -4px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

Gradient Overlay on Images

Dark gradient overlay over images for text readability:

.card-image {
  position: relative;
}

.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7) 0%,
    transparent 60%
  );
}

Check Mark with ::before

A custom checkbox check mark drawn with CSS borders:

.custom-check::before {
  content: "";
  width: 8px;
  height: 14px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(40deg);
  display: inline-block;
  margin-bottom: 4px;
}

Ribbon Banner

A ribbon effect on cards using ::before with negative positioning:

.card {
  position: relative;
}

.card.featured::before {
  content: "FEATURED";
  position: absolute;
  top: 12px;
  right: -8px;
  background: gold;
  padding: 2px 16px;
  font-size: 0.7rem;
  font-weight: bold;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
}

Shimmer Loading Effect

A CSS skeleton loading shimmer without JavaScript:

.skeleton {
  background: #e0e0e0;
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

Quick Check

What property combination creates a pure CSS upward-pointing triangle?

Recap

Pseudo-elements unlock rich decorative patterns without extra HTML: arrows, overlays, animated underlines, badges, ribbons, and shimmer effects. All rely on content: "" + position: absolute + creative use of borders, clip-path, and transforms.

Frequently asked questions

Is the “Decorative Patterns with Pseudo-elements” lesson free?

Yes — the full text of “Decorative Patterns with Pseudo-elements” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Decorative Patterns with Pseudo-elements”?

Build decorative shapes, dividers, and overlays using ::before and ::after without extra HTML. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Decorative Patterns with Pseudo-elements” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

::before and ::after Content
::placeholder ::selection and ::marker
CSS Counters with ::before
Decorative Patterns with Pseudo-elements

← Back to CSS Academy