::before and ::after Content
Insert generated content before or after elements using ::before and ::after with the content property.
::before and ::after Content is a free CSS Academy lesson on CoddyKit — lesson 1 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.
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: "→";
}The content Property
The content property accepts:
- A string:
content: "text" - Empty string:
content: ""(common for decorative shapes) - URL:
content: url("icon.svg") - Counter:
content: counter(step) - attr():
content: attr(data-tooltip)
Decorative Quotes
Add typographic quotation marks without adding them to HTML:
blockquote::before {
content: "\201C"; /* Unicode left double quote */
font-size: 4rem;
color: #ccc;
}
blockquote::after {
content: "\201D"; /* right double quote */
}Shapes with Empty content
Setting content: "" with position and dimensions creates decorative shapes without extra HTML:
.card::before {
content: "";
position: absolute;
top: -8px;
left: 0;
right: 0;
height: 8px;
background: royalblue;
border-radius: 8px 8px 0 0;
}Clearfix with ::after
The classic clearfix uses ::after to clear floats without extra markup:
.clearfix::after {
content: "";
display: table;
clear: both;
}Tooltip with ::after
CSS-only tooltip using ::after and attr():
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: black;
color: white;
padding: 4px 8px;
white-space: nowrap;
pointer-events: none;
}Icon with content: url()
Insert a small icon before links using content: url():
a[target="_blank"]::after {
content: url("external-icon.svg");
margin-left: 4px;
}Limitations of Pseudo-elements
Pseudo-elements are not in the DOM. They are:
- Not selectable or searchable by users
- Not accessible to screen readers by default
- Not targetable by JavaScript
Never put essential content in generated content — use them only for decorative purposes.
Single vs Double Colon
Single colon (:before) was the CSS2 syntax. Double colon (::before) is the CSS3 standard that distinguishes pseudo-elements from pseudo-classes. Both work in modern browsers, but use double colon for new code.
Which Elements Support ::before/::after
Replaced elements (img, input, select, video) cannot have pseudo-elements because they have no content area to insert into. Use a wrapper element for decoration instead.
Quick Check
Which content value is required for a decorative ::before pseudo-element with no visible text?
Recap
::before and ::after insert generated content around an element's real content. The content property is required. Use them for decorative shapes, icons, quotes, and tooltips — but never for meaningful content that users need to access or read.
Frequently asked questions
Is the “::before and ::after Content” lesson free?
Yes — the full text of “::before and ::after Content” 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 “::before and ::after Content”?
Insert generated content before or after elements using ::before and ::after with the content property. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “::before and ::after Content” 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