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

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

Note, this is not a new change but an update to the documentation:

Correct. We also mentioned this for rendering previously, but it was never documented in writing. We ran into...

Your content is great. However, if any of the content contained herein violates any rights of yours, including those of copyright, please contact us immediately by e-mail at media[@]kissrpr.com.