[ @sdxc/u/state ]
before
Applies the given utilities to an element's ::before pseudo-element.
import { before } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.before([u.raw({ content: '""' }), u.absolute()]) | css({ "&::before": { content: '""', position: "absolute" } }) |
Examples
Basic example
Wrap utilities in before() to style an element's ::before pseudo-element, and give it something to show with pseudoContent():
Small, sharp tools that each do one thing well.
<blockquote
mix={[before([pseudoContent('"“"'), fg("brand"), text("3xl"), weight("bold")]), ...]}
>
Small, sharp tools that each do one thing well.
</blockquote>Decorative shapes
Pass pseudoContent('""') for an empty pseudo-element, then position and paint it like any other box:
<aside
mix={[
relative(),
pis(6),
before([
pseudoContent('""'),
absolute(),
inset(0, "auto", 0, 0),
is(1),
rounded("full"),
bg("brand.solid"),
]),
...,
]}
>
Upgrade to Bun 1.3 before running the migrations.
</aside>Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.before([u.raw({ content: '""' }), u.absolute()]))Signature
u.before(input: UtilityInput<Node>)