new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/content

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

content utility class syntax

The content utility has three main syntaxes: content-[<value>] for arbitrary values that outputs content: <value>;, content-(<custom-property>) for CSS custom properties that outputs content: var(<custom-property>);, and content-none which outputs content: none;

content-[<value>] with before and after variants

Use the content-[<value>] syntax combined with before and after variants to set the contents of ::before and ::after pseudo-elements. For example, after:content-['_↗'] adds a space and arrow character after an element.

content-[attr(<name>)] syntax

Use the content-[attr(<name>)] syntax to reference a value stored in an HTML attribute using the CSS attr() function. For example, before:content-[attr(before)] will display the value of the 'before' attribute.

Spaces in content utility arbitrary values

Replace spaces with underscores in arbitrary content values since whitespace denotes the end of a class name in HTML. For example, use before:content-['Hello_World'] to render 'Hello World'.

Escaping underscores in content utility values

To include a literal underscore in a content utility arbitrary value, escape it with a backslash. For example, use before:content-['Hello\_World'] to render 'Hello_World'.

content-(<custom-property>) CSS variable shorthand

The content-(<custom-property>) syntax is shorthand for content-[var(<custom-property>)] that automatically wraps the custom property name in the var() function.

content utility responsive design

The content utility supports responsive variants. For example, before:content-['Mobile'] md:before:content-['Desktop'] will show different content at different breakpoints.

Give your agent this brain