Custom Bullets

custom_bullets.scss

/*==================================
Lists
---
General ul and ol elements within wysiwyg content areas having specific bullet or numbered styling.
The below styles create custom bullets and numbered lists. Bullets can be any image or unicode. Numbers can have a specific font style.
==================================*/

ul, ol {
  margin: 0;
  padding: 0;
}

// Styled list within content areas

.wysiwyg {

    // General

    ul, ol {
        list-style: none;
        margin: 0 0 20px;
        padding-left: 0;
    }

    ul li, ol li {
        margin-bottom: 5px;
        margin-left: 20px;
        position: relative;
    }

    // Unordered List

    ul li:before {
        content: "\2022";
        padding-right: 5px;
        font-size: 40px;
        vertical-align: middle;
        display: inline-block;
        margin-left: -20px;
        position: absolute;
        left: 0;
    }

    // Ordered

    ol li {
        counter-increment: item;
    }

    ol li:before {
        padding-right: 5px;
        content: counter(item) ".";
        font-family: 'neutratextps_bold', sans-serif;
        display: inline-block;
        margin-left: -1em;
    }

}