Custom list styles

by cathead

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<p>
    All lists should scale gracefull with font-size changes.
</p>

<h1>Generic unordered list</h1>
<ul>
    <li>
        Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget metus
    </li>
    <li>
        Maecenas faucibus mollis interdum
    </li>
</ul>

<h1>Square with pseudo element</h1>

<ul class="list list-square">
    <li>
        Donec id elit non mi porta gravida at eget metus Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget 
    </li>
    <li>
        Maecenas faucibus mollis interdum
    </li>
</ul>

<h1>Circle with pseudo element</h1>
<ul class="list list-circle">
    <li>
        Donec id elit non mi porta gravida at eget metus Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget 
    </li>
    <li>
        Maecenas faucibus mollis interdum
    </li>
</ul>

SCSS

/*
    Common
    List Square with pseudo-element
*/

.list {
    list-style: none;
    li {
        position: relative;
    }
}

body {
  line-height: 1.2;  
}

// List Square with pseudo-element
.list-square {
    font-size: 24px;

    li::before {
        color: red;
        content: '■';
        left: -1em;
        line-height: inherit;
        position: absolute;
    }
}

.list-circle {
    li::before {
        color: green;
        content: '●';
        left: -1em;
        line-height: inherit;
        position: absolute;
    }
}