CSS attr content demo

Demo of CSS content from an element's attributes. Inspired by: http://davidwalsh.name/css-content-attr

HTML

<span class="demo" data-demo="1">Everything after the colon is generated from CSS:</span>
<br/><button type="button" onclick="plusplus()">Add one!</button>

CSS

.demo:after {
    content: ' count is ' attr(data-demo) '!';
}

JavaScript

function plusplus() {
    var $el = document.querySelector('.demo'),
        val = parseInt($el.getAttribute('data-demo'));
    
    $el.setAttribute('data-demo', val + 1);
    return false;
}