I discovered something (very / reasonably / not very) cool today. And it will seriously improve my life as a developer. Well maybe not that much, but still.

Whenever I do any jiggery pokery with icons and such in CSS, I always use the `:before` and `:after` pseudo selectors. The CSS `content` property allows developers to set the content of the pseudo element through the medium of CSS. Now some people disagree with this, pointing out that CSS as a construct is not meant to be concerned with the content, but rather more focused on the layout of the content. However, I'm a realist, and realise that this is what happens out in the wild.

So say you have a multi-lingual site which has a button with a hidden state such as "Added" or "Removed" which you intend to use the `content` property to store these words. I used to think that the content property could only take a string (i.e. `content:'Hello';`), however it turns out you can access the attributes of the aforementioned element through CSS using `attr()`. For example, in your JavaScript, you can set a data attribute of the button to the text you wish to display in certain scenarios:

$(function() {
    $('.button').hover(
      function() {
        // hover in
        $(this).attr('data-foo','Hover in');
        $(this).css({
            opacity:0.0
        });
      }, function() {
        // hover out
        $(this).attr('data-foo','Hover off');
        $(this).css({
            opacity:1.0
        });
      }
    );
});

After this has been set, you can nominate for a particular attribute to be used as the pseudo elements content:

.button:after {
  content: attr(data-foo);
  color:#ffe;
  font-size:1.5rem;
  padding:1em;
  display:inline-block;
}

Cool ey!