Counters + Debugger

custom counters on elements & visual debugger id and class

by toubia95

HTML

<div id="wrapper">
    <div id="header" class="GJK sdfg sdfg"></div>
        <div></div>
    <div id="right"></div>
    <div id="left" class="toto belkjf"></div>
</div>

CSS

#wrapper, #header, #left, #right {
    display: block;
}

#wrapper {
    background:#111;
    width: 300px;
}

#header {
    background:#222;
    height:50px;
}

#left {
    background:#333;
    width: 100px;
    float: right;
    height: 100px;
}

#right {
    background:#444;
    width: 200px;
    float: right;
    height: 150px;
}

/* debugger */

html {
    counter-reset: html;
    font-size: 62.5%;
}

html * {
    counter-increment: html;
}

*[id]:before, *[class]:after {
    display: inline;
    position: relative;
    font: 1em/1.5 verdana, sans-serif;
    color: white; 
    padding: 0 5px;
    border-radius: 3px;
    margin: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
}

*[id]:before {
    content:"["counter(html)"] #"attr(id);
    background: blue;
}

*[class]:after {
    content:"."attr(class);
    background: green;
}