Custom Ordered List Mixins in LESS

custom-list.less

// This is a snipit from a post I wrote up detailing the process. Check it out if you want to learn more
// https://jimmynotjim.snipt.net/create-a-custom-ordered-list-in-css-and-sass/

// Basic mixin to prefix each li w/ it's list number
.custList {
    counter-reset: item;
    list-style: none;

    & > li {
        &::before {
            content: counter(item) ".";
            counter-increment: item;
        }
    }
}

// Sets the prefixes to act more like a traditional ordered list ie. hanging & independent
.hangList {
    padding-left: 52px;
    padding-left: 3.125rem;

    & > li {
        position: relative;

        &:before {
            left: -32px;
            left: -2rem;
            width: 26px;
            width: 1.625rem;
            content: counter(item);
            position: absolute;
            text-align: right;
        }
    }
}

// An example of how you would use the two mixins followed by customized content and styles
.steps {
    .custList;
    .hangList;

    padding-left: 72px;
    padding-left: 4.5rem;

    & > li {
        border-bottom: 1px solid @blueHighlight;

        &::before
            .slab;
            font-size: 20px;
            font-size: 1.25rem;
            left: -66px;
            left: 4.125rem;
            width: 60px;
            width: 3.75rem;
            color: @blue;
            content: "Step " counter(item) "- ";           
        }        
    }
}