JS: data-width

more at: http://stackoverflow.com/a/16948730/1250044

HTML

<div data-width='10%'></div>
<div data-width='20%'></div>
<div data-width='30%'></div>
<div data-width='40%'></div>
<div data-width='50%'></div>
<div data-width='60%'></div>
<div data-width='70%'></div>
<div data-width='80%'></div>
<div data-width='90%'></div>
<div data-width='100%'></div>

CSS

div {
    margin-bottom: 1px;
    background: #0ae;
    -webkit-transition: width 2s ease-out;
}

div:before {
    content: attr(data-width);
}

JavaScript

// helper to add pseudo-selectors
var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));




// add 100 data-width pseudo-selectors
var i = 101;
while (i--) {
    addRule("[data-width='" + i + "%']", "width:" + i + "%");
}