How to hide CSS generated content from screen readers without HTML markup?

Question

How would one hide CSS certain generated content (used for pure styling) from screen reader? Is it possible without using HTML hacks like aria-hidden?

E.g. I use code content: '·'; for separating stuff. I've checked facebook & other big players but they all seem to use spans with aria-hidden:

<span aria-hidden="true">·</span>

Does it mean it’s not possible currently?

Answer 1

For future references, note that according to CSS 3 documentation:

Generated content should be searchable, selectable, and available to assistive technologies. The content property applies to speech and generated content must be rendered for speech output.

It's also stated that :

If the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element.

This concernes ::before and ::after pseudo-elements; alternative text might be indicated after a /:

.expandable::before {
  content: "\25BA" / ""; 
}

For CSS2, you may use unpronounceable UTF-8 elements in order to be sure that the elements won't be announced.

For instance, when you use the code:

.bullet {
    content: "\2022";
}

\2022 (bullet : •) announces "bullet" with NVDA while another code like \2023 (triangular bullet : ‣) announces nothing