CSS/SASS: Listen

Mit CSS3 können Listen im Tabellen-Style definiert werden. Dadurch wir die Position von nummerierten Aufzählungszeichen und Inhalt dynamisch und die Aufzählungszeichen lassen sich einfach umsetzen.

=============================== <li>
|  1. | Description           |
=============================== </li>
...
=============================== <li>
| 20. | Description           |
=============================== </li>
:before

ol {
    counter-reset: ordered-list;
    display: table;
    padding-left: 0;

    > li {
        counter-increment: ordered-list;
        display: table-row;

        &::before {
            content: counter(ordered-list) ".";
            display: table-cell;
            text-align: right;
            // If item spacing needed use padding-top
            padding: 0.6em 0.4em 0 0;
        }

        &:first-child::before {
            padding-top: 0;
        }
    }
}