Google: Keep Important Content Out Of Before Or After CSS Pseudo-Elements

Google posted on Twitter "we recommend not adding meaningful content or symbols using ::before or ::after CSS pseudo-elements." Google said such content "might not be used for indexing your pages." Note, this is not a change to how Google Search works, it is just now mentioned in the documentation.

Google added that it "clarified in the developer's guide that Google Search currently may not index content inside CSS content properties as that isn't part of the DOM."

Google added that you can still use the element for decorative purposes.

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). A CSS pseudo-element is used to style specified parts of an element. It can be used to style the first letter, or line, of an element and insert content before, or after, the content of an element. You can see examples of how this is done on W3 Schools.

Google said they specifically updated their help documentation to mention this.

Here is that tweet:

We added an update to our docs at https://t.co/P5NEdHpk0Y - we recommend not adding meaningful content or symbols using ::before or ::after CSS pseudo-elements, as it might not be used for indexing your pages. Decorative elements are fine.

— Google Search Central (@googlesearchc) September 22, 2023

Correct. We also mentioned this for rendering previously, but it was never documented in writing. We ran into some sites that are using this, and it's hard to explain what to fix without having a reference :).

— Hey John, Your profile caught my eye. Ouch. (@JohnMu) September 22, 2023

Yeah, this is not a change, it's just an update to the documentation on how things are. I could also imagine it changing over time, either as browsers evolve to make it selectable/findable, or separately.

— Hey John, Your profile caught my eye. Ouch. (@JohnMu) September 22, 2023

🚨 Do not use ::before and ::after for important, semantic, or actionable content.

This is also important for accessibility. Users who rely on screen readers might also miss that content because these pseudo-elements. https://t.co/myWPohfSGw

— Andrea Volpini (@cyberandy) September 22, 2023

Note: I am posting stories today, Sunday, because tomorrow is Yom Kippur and I am not posting anything on Yom Kippur.

Forum discussion at X.