this post was submitted on 04 Nov 2025
3 points (71.4% liked)

CSS

652 readers
2 users here now

founded 2 years ago
MODERATORS
top 2 comments
sorted by: hot top controversial new old
[–] Kissaki@programming.dev 1 points 3 weeks ago

I'm a bit confused, because MDN ::after says in the accessibility section:

Using an ::after pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

which contradicts the article saying ::after content gets included as per spec. They conclude though with

While it’s good and certainly useful that we can now provide alt text for CSS generated content, I do not recommend using CSS to insert meaningful content into the page.

Not only will some of your screen reader users miss meaningful information when the alt text is not announced by their screen reader (looking at NVDA with Chrome 👀), but there are also other reasons why inserting meaningful content in CSS is not yet recommended…

so I assume it's a spec vs real world thing.

[–] Kissaki@programming.dev 1 points 3 weeks ago

If you want a teaser what this is about, the / content syntax for screen read representation (to evade misrepresentative emoji translations, for example).

::after {
    content: " \2197" / "Opens in a New Window" ; 
}

They also talk about image alt text and ::after url.