Extend documentation on pseudo element content with new alt text syntax in CSS

[maurer2]

Hello, there's a new syntax for pseudo element content that makes it more accessible to screen readers. It seems to be working already in the latest version of tailwind, so it only needs to be added to the docs. I extended the basic example on the content-page.

I also created an example here: https://play.tailwindcss.com/OAdHWruV1H

<a href="#" class="after:content-['_↗'/'Opens_in_new_window_or_tab']">Link</a>

compiles to

{
content: ' ↗'/'Opens in new window or tab';
}

Image:

Cheers

[vercel]

@maurer2 is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Confidence Score: 4/5

The change is purely additive documentation — no code paths are affected and the CSS syntax demonstrated is well-formed and already verified working in the Tailwind playground.

The alt text feature is inserted directly into the "Basic example" section rather than getting its own subsection, which slightly reduces the documentation's readability for newcomers. This is a minor structural concern with no functional impact on the library itself.

src/docs/content.mdx — worth reconsidering whether the alt text syntax belongs in the basic example or deserves its own subsection.

_{Reviews (1): Last reviewed commit: "Added example of alt text syntax for pse..." | Re-trigger Greptile}

[greptile-apps]

Basic example now carries two concepts at once

The alt text feature has been folded directly into the "Basic example" section, so a reader visiting this page for the first time sees the more complex after:content-['_↗'/'Opens_in_new_window_or_tab'] class before ever seeing a plain content utility. The existing pattern in this file (and across the docs) is to give a minimal working example in the first section and introduce variations in their own ### subsections (see "Referencing an attribute value", "Using spaces and underscores", "Using a CSS variable"). A dedicated subsection — e.g. ### Providing alternate text — would keep the basic example readable and make the accessibility feature easier to discover on its own.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!