CSS Generated Content

May 04, 2015

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.

<div class="sample"></div>
.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="1"></div>
div[data-step]:after { 
	content: "Step " attr(data-step) ""; 

John SiwickiWritten by John Siwicki who lives and works building interesting things. You should follow him on Twitter