AAtomic CSS

content

::beforeand ::after Sets the content to generate in pseudo-elements. Atomic CSS provides an empty content (content: '') class.

Class List

ClassCSSDescription
contentEmptycontent: ''Empty content. Activates ::before/::after pseudo-elements

Usage Examples

contentEmptyis used with pseudo-element selectors (before-, after-).

<!-- Decorative pseudo-elements (dividers, etc.) -->
<div class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF">
  Content above the divider
</div>

<!-- clearfix Pattern -->
<div class="after-contentEmpty after-db after-clb">
  <div class="fl w50p">Float Left</div>
  <div class="fl w50p">Float Right</div>
</div>

<!-- Indicator dot -->
<span class="before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px">
  Online
</span>

Tips & Notes

Why content is required

::beforeand ::after content property will not render. Decorative pseudo-elements must have empty content set.

Accessibility note

Pseudo-element content can be read by screen readers. For decorative purposes, use an empty string (contentEmpty).

displayvisibility