content

Sets content of ::before and ::after pseudo-elements. For decorative elements and clearfix.

Class List

Class	CSS	Description
`contentEmpty`	content: ''	Empty string content (for creating pseudo-elements)

Visual Demo

Neither element below has a child tag. The line and the dot you can see are pseudo-elements, and they only exist because of the empty content class.

before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF

The rule above this paragraph is its own pseudo-element.

before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px

Online

The green dot in front is a pseudo-element too, not a separate tag.

Usage Examples

Style pseudo-elements with before- / after- prefixes.

<!-- 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>

Class Details

`contentEmpty`content: ''

Gives the pseudo-element an empty string so it actually gets created. Without it the element simply does not exist, no matter how much size or background you set. Use it for decorative rules, dots, arrows and gradient overlays that carry no meaning.

<!-- Nothing renders without contentEmpty -->
<p class="before-db before-w100p before-h1px before-bgFFFFFF">
  No rule appears: the pseudo-element was never created.
</p>

<!-- Add contentEmpty and the rule shows up -->
<p class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF">
  Now there is a hairline above this text.
</p>

`before-after-`Pseudo-element prefixes

The rest of the pseudo-element's styling is written with the before and after prefixes. Pseudo-elements are inline by default, so width and height are ignored until you also add a block or inline-block class.

<!-- Inline by default: width and height are ignored -->
<span class="before-contentEmpty before-w8px before-h8px before-bg34D399">
  The dot has no size yet.
</span>

<!-- Add a display class and it becomes a real box -->
<span class="before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px">
  Now the dot is round and 8px wide.
</span>

Practical Example — Status Badge and Divided List

A badge with a status dot and a list with rules between items. Both decorations are pseudo-elements only, which keeps the markup free of empty tags.

<!-- Status badge: the dot is generated, not a tag -->
<span class="before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px
             dib py6px px12px br6px bg1E1E2E b1pxsolid27272A fs13px cFAFAFA">
  Operational
</span>

<!-- List where each item draws its own hairline -->
<ul class="mt2rem">
  <li class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF
             py12px fs14px c71717A">Deploy pipeline</li>
  <li class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF
             py12px fs14px c71717A">Edge cache</li>
  <li class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF
             py12px fs14px c71717A">Webhook delivery</li>
</ul>

Tips / Caveats

Without content the pseudo-element does not exist

Width, height and background color are all ignored if there is no content value, because nothing is generated at all. When a decoration is missing, check for this class first.

It does nothing on a normal element

The content property only means something on pseudo-elements. Applied directly to an element without a prefix, it has no effect.

Never put real information in it

Generated content is skipped when users copy text and is announced inconsistently by screen readers. Anything meaningful belongs in a real element.

Sizing fails because the default is inline

A pseudo-element is inline by default, so width and height are ignored. To build a dot or a bar you must add a block-level display class as well.

Replaced elements get no pseudo-elements

Tags whose content the browser replaces, such as images and inputs, do not generate pseudo-elements. Decorate a wrapper element instead.

content is required

::before and ::after render only with content. Even an empty string must be specified.

display needed

Pseudo-elements are inline by default. Use before-db or before-dib to size them.

display visibility position float