CSS Generated Content

CSS can be sneakily powerful at times. There are times when it could really get yout out of a jam with some of the lesser know selectors and property. Today, content and attr solved a really special problem from me. These have been around for a long time but in the work I do they are not necessarily used in every project. But, when I do pull them out of the bag of tricks it always seems to blow me away. Below we have a good example of content in action.

.sample:after { content: “I am hardcoded text”; }

attr are used with custom data- attributes. Its hard to example so lets just see an example that will help.

div[data-step]:after { content: “Step ” attr(data-step) “”; background-color:yellow; }