# content

> Applies the CSS `content` property, almost always on a `::before`/`::after` pseudo-element.

```ts
import { pseudoContent } from "@sdxc/u/general";
```

Applies the CSS `content` property, almost always on a `::before`/`::after`
pseudo-element. The `pseudo` prefix keeps the name distinct from
`@sdxc/u/layout`'s `content()`, which sets `align-content`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.pseudoContent('""')` | `css({ content: '""' })` |
| `u.pseudoContent('"→"')` | `css({ content: '"→"' })` |

## Examples

### Basic example

Use `pseudoContent(value)` inside `before()` or `after()` to set the text a pseudo-element draws; the value is CSS, so a string keeps its quotes:

```tsx
<p mix={[...]}>
	Read the{" "}
	<a href="https://example.com/releases" mix={[fg("brand"), after(pseudoContent('" ↗"'))]}>
		release notes
	</a>{" "}
	or ask in the{" "}
	<a href="https://example.com/forum" mix={[fg("brand"), after(pseudoContent('" ↗"'))]}>
		community forum
	</a>
	.
</p>
```

### Marking required fields

Combine `pseudoContent()` with other utilities on the same pseudo-element, like `after([pseudoContent('" *"'), fg("danger")])`:

```tsx
<label mix={[vstack({ gap: 1 }), maxIs(72)]}>
	<span mix={[weight("medium"), after([pseudoContent('" *"'), fg("danger")])]}>
		Email address
	</span>
	<input
		type="email"
		required
		mix={[
			p(2, 3),
			rounded("md"),
			border({ color: "neutral.border", width: 1, style: "solid" }),
		]}
	/>
</label>
```

### Reading attributes

The value can use CSS functions like `attr()`, so `pseudoContent('" (" attr(href) ")"')` prints the address a link points to:

```tsx
<p mix={[...]}>
	Tickets are on sale at the{" "}
	<a
		href="https://example.com/tickets"
		mix={[after([pseudoContent('" (" attr(href) ")"'), text("sm"), fg("neutral.muted")])]}
	>
		box office
	</a>
	.
</p>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.pseudoContent('""'))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.pseudoContent('""'))
```

## Signature

```ts
u.pseudoContent(value: string)
```