Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maurer2 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/docs/content.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const description = "Utilities for controlling the content of the before

### Basic example

Use the `content-[<value>]` syntax, along with the `before` and `after` variants, to set the contents of the `::before` and `::after` pseudo-elements:
Use the `content-[<value>]` syntax, along with the `before` and `after` variants, to set the contents of the `::before` and `::after` pseudo-elements. Optionally add a `/` followed by a description to provide alternate text that screen readers announce in place of the content.

<Figure>

Expand All @@ -29,7 +29,7 @@ Use the `content-[<value>]` syntax, along with the `before` and `after` variants
Higher resolution means more than just a better-quality image. With a Retina 6K display,{" "}
<a
href="https://www.apple.com/pro-display-xdr/"
className="font-medium text-blue-600 after:text-sm after:font-bold after:content-['_↗'] dark:text-sky-400"
className="font-medium text-blue-600 after:text-sm after:font-bold after:content-['_↗'/'Opens_in_new_window_or_tab'] dark:text-sky-400"
target="_blank"
>
Pro Display XDR
Expand All @@ -40,10 +40,10 @@ Use the `content-[<value>]` syntax, along with the `before` and `after` variants
</Example>

```html
<!-- [!code classes:after:content-['_↗']] -->
<!-- [!code classes:after:content-['_↗'/'Opens_in_new_window_or_tab']] -->
<!-- prettier-ignore -->
<p>Higher resolution means more than just a better-quality image. With a
Retina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">
Retina 6K display, <a class="text-blue-600 after:content-['_↗'/'Opens_in_new_window_or_tab']" href="...">
Pro Display XDR</a> gives you nearly 40 percent more screen real estate than
a 5K display.</p>
```
Comment on lines 20 to 49

@greptile-apps greptile-apps Bot Jul 21, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 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!

Expand Down