We developers often add special characters, like triangles, arrows, or bullet icons to the content property of these pseudo-elements. I've often seen this method with creating custom bullet icons for an unordered list. What many people don't know is that the screen readers actually read these characters added to the content property, the way it reads the content (and if it reads it at all) will depend on the screen reader and the browser you use. For example, Narrator doesn't read the icon even in the bad example but VoiceOver does.
With this content property, you should be able to also give an alt text instead of ignoring the content. But this I've yet to see in action. I've quickly tested it, and it doesn't seem to work at least on all elements on the browsers I've used with VoiceOver or Narrator. But it does work nicely for ignoring the content at least with VoiceOver.
Make sure to ensure the content visibility on Firefox and Safari, those don't yet fully support this feature and can end up hiding the element visually. In these cases, I would recommend using the content as a background image instead of the content property.