My name is Sofi. I am CSS engineer. This is my blog.

If you're really hurt without styles, you can them on.

.

Pseudo-elements and translators.

It is better to not put an important text in content property. And even better to not put any text here.

Apart from the fact, that it is not visible for screen readers, because it doesn't exist in DOM, it can't be translated by browser embedded translators such as google translator in Google Chrome.

Here is an example. This page is pn Finnish language (it defines by lang="fi" attribute on html tag). The text with green emoji 🍏 is written inside the p tag. And the text with red emoji in written with content property.

<html lang="fi">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>omena 🍏</p>
    <div></div>
    <style>
        div:after {
            content: ' omena 🍎';
        }
    </style>
</body>
</html>

You can open this demo in new tab and translate. You will see that only the first text would be translated.

only the first text is translated

Citation

If you see a link to this article in a source that is not listed here, please let me know.