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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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:
<div class="triangle"></div>Tooltip Arrow
A tooltip arrow using ::before:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>Diagonal Section Divider
A slanted section break using skew or clip-path on ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Decorative Underlines
Animated underline effects using ::after:
<a href="#">Hover me (underline animates in on :hover)</a>Badge with ::after
A notification badge overlay without extra HTML elements:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Gradient Overlay on Images
Dark gradient overlay over images for text readability:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Check Mark with ::before
A custom checkbox check mark drawn with CSS borders:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Ribbon Banner
A ribbon effect on cards using ::before with negative positioning:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Shimmer Loading Effect
A CSS skeleton loading shimmer without JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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