Header level. LESS mixin to help you identify the level of the headers in your text.

header-level.less

/* ======================================================
LESS mixin to help you identify the level
of the headers in your text.
---------------
Using a sound and complete header hierarchy vastly
improves the accessibility and understandability of your
document.
====================================================== */


@violet: #C42C76;
@wit: #fff;
@bodyfont: Helvetica, Arial, sans-serif;

.headercheck() {
    h1, h2, h3, h4, h5, h6 {
        &:before {
            content: 'header';
            background: @violet;
            color: @wit;
            padding: .5em;
            font-size: 16px;
            display: block;
            font-family: @bodyfont;
            float: left;
            margin: 0 .3em .3em 0;
            border: 1px solid @wit;
        }
    }
    h1 {
        &:before {
            background: darken(@violet,1%);
            content: 'H1';
        }
    }
    h2 {
        &:before {
            background: darken(@violet,10%);
            content: 'H2';
        }
    }
    h3 {
        &:before {
            background: darken(@violet,20%);
            content: 'H3';
        }
    }
    h4 {
        &:before {
            background: darken(@violet,30%);
            content: 'H4';
        }
    }
    h5 {
        &:before {
            background: darken(@violet,40%);
            content: 'H5';
        }
    }
    h6 {
        &:before {
            background: darken(@violet,50%);
            content: 'H6';
        }
    }
}

.headercheck();