CSS Tips&Tricks

CSS Content property – make it dynamic

Content property is mostly used with pseudo elements like ::before and ::after. And in most cases it’ s empty, because it serves some other purpose like overlay, or line etc.

Content property is often underestimated due to its lack of a11ty. One of the major issues is that you can not translate CSS. In next example we are using content property so we can add $ symbol at the end.

See the Pen Content by webinuse (@webinuse) on CodePen.

But what if we decide to translate to another language with another currency? Use attributes. That way you can translate HTML, change attributes dynamically, etc.

See the Pen gOpZgNj by webinuse (@webinuse) on CodePen.

Leave a Reply