[ @sdxc/u/state ]

after

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

<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":

Read the guide or the source on GitHub.

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

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

Signature

u.after(input: UtilityInput<Node>)