Pseudo-elements

Atomic CSS supports ::before and ::after pseudo-elements. Primarily used with relation selectors to create decorative elements, icons, badges, overlays, etc.

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 relation selectors.

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.

{트리거}-{의사클래스}-{before|after}-{클래스}

Component	Description	Example
`트리거`	Identifier of the element the class is applied to	`badge`
`의사클래스`	State condition (hover, focus, etc.)	`hover`
`before \| after`	Pseudo-element keyword	`after`
`클래스`	Atomic CSS class to apply	`contentEmpty`

How the syntax converts to CSS:

/* class: badge-after-contentEmpty */
.badge::after { content: ''; }

/* class: badge-after-pa */
.badge::after { position: absolute; }

/* class: badge-after-w8px */
.badge::after { width: 8px; }

/* class: link-hover-after-w100p */
.link: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 badge-after-contentEmpty badge-after-pa badge-after-t0 badge-after-r0 badge-after-w8px badge-after-h8px badge-after-br50p badge-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 heading-after-contentEmpty heading-after-pa heading-after-b0 heading-after-l0 heading-after-w100p heading-after-h3px heading-after-bg6366F1 heading-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 quote-before-contentEmpty quote-before-pa quote-before-t0 quote-before-l0 quote-before-w4px quote-before-h100p quote-before-bg6366F1 quote-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="label-after-cEF4444 label-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="clearfix-after-contentEmpty clearfix-after-db clearfix-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.

{트리거}-hover-after-{클래스}

Navigation link with underline appearing on hover:

<!-- Underline animation on hover -->
<a href="#" class="pr dib link-after-contentEmpty link-after-pa link-after-b0 link-after-l0 link-after-w0 link-after-h2px link-after-bg6366F1 link-hover-after-w100p link-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 card-after-contentEmpty card-after-pa card-after-t0 card-after-l0 card-after-w100p card-after-h100p card-after-bg0-0-0-0 card-hover-after-bg0-0-0-50 card-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.

pseudo-class Relation selectors position display