Pseudo-elements
Atomic CSS supports ::before and ::after pseudo-elements. Primarily used with
Supported List
| Keyword | CSS | Description |
|---|---|---|
before | ::before | Generates virtual content at the very beginning inside the element |
after | ::after | Generates virtual content at the very end inside the element |
How It Works
Pseudo-elements are not used standalone. They apply styles to a specific element's ::before or ::after through
Key: A content property is required for pseudo-elements to appear on screen. In Atomic CSS, the contentEmpty class applies content: ''.
Syntax Format
Pseudo-elements are placed at the relation keyword position within the relation selector syntax.
{trigger}-{pseudo-class}-{before|after}-{class}| Component | Description | Example |
|---|---|---|
pseudo-class (optional) | State condition (hover, focus, etc.) | hover |
before | after | Pseudo-element keyword | after |
class | Atomic CSS class to apply | contentEmpty |
How the syntax converts to CSS:
/* class: after-contentEmpty → the element's own ::after */
.after-contentEmpty::after { content: ''; }
/* class: after-w8px */
.after-w8px::after { width: 8px; }
/* pseudo-class combo: hover-after-w100p */
.hover-after-w100p:hover::after { width: 100%; }Practical Examples
Badge / Notification Dot
Creates a notification badge using ::after. Set pr (position: relative) on the parent, and position the pseudo-element with pa (position: absolute).
<!-- Notification badge (red dot) -->
<button class="pr after-contentEmpty after-pa after-t0 after-r0 after-w8px after-h8px after-br50p after-bgEF4444 py8px px16px bg27272A cFAFAFA br8px bn cp">
Notification
</button>
<!-- CSS output:
.badge::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 8px; height: 8px;
border-radius: 50%;
background-color: #EF4444;
}
-->Decorative Underline
Creates a custom underline using ::after. Provides more control over thickness, color, and position than standard text-decoration.
<!-- Custom decorative underline -->
<span class="pr dib after-contentEmpty after-pa after-b0 after-l0 after-w100p after-h3px after-bg6366F1 after-br4px pb8px">
Section Title
</span>
<!-- CSS output:
.heading::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 3px;
background-color: #6366F1;
border-radius: 4px;
}
-->Quotation Marks
Uses both ::before and ::after to decorate quotation marks.
<!-- Quotation mark decoration -->
<blockquote class="pr pl4rem before-contentEmpty before-pa before-t0 before-l0 before-w4px before-h100p before-bg6366F1 before-br4px fs16px cA1A1AA lh1-8 fsi">
Good design is as little design as possible.
</blockquote>
<!-- CSS output:
.quote::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background-color: #6366F1;
border-radius: 4px;
}
-->Required Field Indicator (asterisk)
Adds a red asterisk (*) after form labels using ::after to indicate required fields.
<!-- Required item asterisk -->
<label class="after-cEF4444 after-ml4px fs14px cFAFAFA">
Email address
</label>
<input type="email" class="w100p py8px px12px bg18181B b1pxsolid27272A br8px cFAFAFA mt4px" />
<!-- Note: Inserting text(' *') into content is handled by CSS,
Atomic CSS has limited support for specifying content values.
This pattern can define content: ' *' in global CSS,
or add <span class="cEF4444 ml4px">*</span> directly in the DOM. -->
<!-- Practical alternative: use DOM elements -->
<label class="df aic gap4px fs14px cFAFAFA">
Email address
<span class="cEF4444">*</span>
</label>Clearfix Pattern
Solves the problem of parents not wrapping floated children in float-based layouts using ::after.
<!-- Clearfix: maintain parent height when using float -->
<div class="after-contentEmpty after-db after-clb">
<div class="fl w50p p16px bg27272A">Left</div>
<div class="fl w50p p16px bg18181B">Right</div>
</div>
<!-- CSS output:
.clearfix::after {
content: '';
display: block;
clear: both;
}
-->
<!-- Note: In modern layouts, using df or dg
eliminates the need for clearfix. -->Combining with hover
Combining pseudo-classes and pseudo-elements allows changing ::before or ::after styles only on hover.
{trigger}-hover-after-{class}Navigation link with underline appearing on hover:
<!-- Underline animation on hover -->
<a href="#" class="pr dib after-contentEmpty after-pa after-b0 after-l0 after-w0 after-h2px after-bg6366F1 link-hover-after-w100p after-tall200msease cFAFAFA tdn pb4px">
Navigation link
</a>
<!-- CSS output:
.link::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 2px;
background-color: #6366F1;
transition: all 200ms ease;
}
.link:hover::after {
width: 100%;
}
-->Card with overlay appearing on hover:
<!-- Show overlay on hover -->
<div class="pr oh br8px after-contentEmpty after-pa after-t0 after-l0 after-w100p after-h100p after-bg0-0-0-0 card-hover-after-bg0-0-0-50 after-tall300msease">
<img src="/image.jpg" class="w100p h100p ofc db" alt="Card image" />
</div>
<!-- CSS output:
.card::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0);
transition: all 300ms ease;
}
.card:hover::after {
background-color: rgba(0,0,0,0.5);
}
-->Tips & Notes
content property required
Pseudo-elements require the content property to render on screen. In Atomic CSS, use the contentEmpty class (content: '').
Does not exist in the DOM
Pseudo-elements are not actual DOM nodes. They cannot be selected or have events bound via JavaScript, and users cannot select (drag) their text.
Use for decoration only
Pseudo-elements are suitable for decorative elements (icons, dividers, background effects, etc.). Place meaningful content or important information in actual DOM elements. Screen readers may not consistently read pseudo-element content.
Cannot be applied to img, input, br, etc.
::before and ::after generate content inside elements. Therefore, they cannot be applied to void elements like img, input, br.