# after

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

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

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

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.after([u.raw({ content: '""' }), u.absolute()])` | `css({ "&::after": { content: '""', position: "absolute" } })` |

## Examples

### Basic example

Wrap utilities in `after()` to style an element's `::after` pseudo-element, like an asterisk after a required field's label:

```tsx
<label mix={[vstack({ gap: 1 })]}>
	<span mix={[text("sm"), weight("medium"), after([pseudoContent('" *"'), fg("danger")])]}>
		Email
	</span>
	<input type="email" required mix={[border("neutral.border"), ...]} />
</label>
```

### Marking external links

Nest `after()` in another state to generate content only where it applies, like an arrow after links with `target="_blank"`:

```tsx
<p mix={[...]}>
	Read the{" "}
	<a
		href="#guide"
		mix={[
			fg("brand"),
			textDecoration(),
			when('&[target="_blank"]', after(pseudoContent('" ↗"'))),
		]}
	>
		guide
	</a>{" "}
	or the{" "}
	<a
		href="https://github.com"
		target="_blank"
		mix={[
			fg("brand"),
			textDecoration(),
			when('&[target="_blank"]', after(pseudoContent('" ↗"'))),
		]}
	>
		source on GitHub
	</a>
	.
</p>
```

## Responsive design

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

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

## Signature

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