# before

> Applies the given utilities to an element's `::before` pseudo-element.

```ts
import { before } from "@sdxc/u/state";
```

Applies the given utilities to an element's `::before` pseudo-element.
Sugar over `when("&::before", input)`.

## 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()`:

```tsx
<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:

```tsx
<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.

```ts
u.at("md", u.before([u.raw({ content: '""' }), u.absolute()]))
```

## Signature

```ts
u.before(input: UtilityInput<Node>)
```