Should you add content with the ::before and ::after CSS pseudo-elements?

Separation of concerns is a key principle in web development. It states that:

Your HTML markup should only be responsible for holding the content of your document and nothing style-related and the CSS stylesheet should only contain styling declarations and not inject any content into the document.

If we do everything correctly, we should be able to swap out the stylesheet and change the entire design of our website without touching the HTML document. This is more obvious, but you should also be able to change the content of the document without having to touch anything in the CSS file.

So it may or may not come as a surprise that it is possible to inject text or images into the HTML from CSS. And if it is possible, why using it does not conflict with the separation of concerns principle?

All you need is HTML and CSS

BTW, this is a chapter I decided to publish for free from my book All you need is HTML and CSS: