CSS generated content

CSS Generated Content is content that is added to the DOM via CSS such as ::before and ::after content.

Estimated Support About

40.0% + 35.0% = 75.0%

JAWS

Chrome

92
1

Edge

92
1

IE

11
1

Firefox

67-74

Narrator

Edge

44
1

NVDA

Chrome

92
1

Edge

92
1

Firefox

60-74

Orca

Firefox

69-74

TalkBack

Android

67-81

VoiceOver (iOS)

iOS

12.3.1-13.4.1
3

VoiceOver (MacOS)

Safari

12.1.1-13.1

Dragon Naturally Speaking

Chrome

70.0-81
1

IE

11.134
2

Firefox

63.0.1
1

Voice Access (Android)

Android

77-81

Voice Control (iOS)

iOS

13.0-13.4.1

Voice Control (MacOS)

Safari

13.0.2-13.1

Windows Speech Recognition

Chrome

77-81
1

Edge

44

Notes

Avoid using CSS generated content for meaningful textual additions.

  • 1

    Didn’t be included as part of the accessible name

  • 2

    CSS generated content in form label: It worked if I said “click generated”, which means that the CSS generated content is not taken into account.

  • 3

    CSS Generated Content with HTML span element: When using the next/previous line command, you have to swipe left/right three times to hear the entire sentence. The first swipe right reads the before generated content ‘this’, the next swipe right reads the html contents ‘is generated’, and the final swipe right reads the after generated content ‘content’.

Resources

Know something we don't?

Is any of the above data outdated? Or do you want to add a new software combination to the list? Heads on to GitHub and edit the data file!

Edit this page on GitHub Report an issue on GitHub

Not comfortable with GitHub? Send us an email or get in touch on Twitter.

Test it yourself

This feature was last tested on July 21, 2018.

If you want to test this feature in the same conditions as we did, you can get our test code and run a test by yourself. Make sure to follow our testing recommendations first.

View the test code