Accessibility of content generated by CSS (element: before and: after)

One of the most versatile (and dangerous) elements of the new versions of CSS are the pseudo-elements: before and: after which, used in conjunction with the content property, allow us to add content to the page without having to modify the HTML code. The code is simple, the next snippet would add the word "Hello" to all .testclass class paragraphs

p.testclass: after {
  content: 'Hello';}

But how does this new content behave in screen readers? The answer is "it depends." Some will read it (VoiceOver, NVDA with Firefox ...) and others will not (NVDA with IE, Jaws ...). Therefore, its use is a problem because, if we add purely visual content (which, in my opinion, would be the idea), as symbols to make a separator, the reader can read it giving rise to an indecipherable tirallonga of "round, round, up arrow, down arrow ...) which, although it does not prevent the use of the web, is frankly uncomfortable. However, if we add relevant content we may find that some users do not have access .

My recommendation would be to use the pseudo-elements: before and: after only to introduce visual content that is not a nuisance to the blind user, in case it is read. For example, a decorative image. And, in any case, always keep in mind what will happen to the user who is read and what will happen to what is not.