CSS pseudo-elements :before and :after are read inconsistently by screen readers: some verbalise them, others do not. They should only be used for decorative visual content that is harmless if read aloud. Relevant content must never be added exclusively through these pseudo-elements.
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.