Edit in JSFiddle

<div class="wrap">

    <div class="header">
        <h1 class="title">olをいい感じにしよう</h1>
    </div>

    <ol class="ex01">
        <li>ノーマル</li>
        <li>ノーマル</li>
        <li>ノーマル</li>
    </ol>
    <ol class="ex02">
        <li>カスタム</li>
        <li>カスタム
        <ol>
            <li>入れ子</li>
            <li>入れ子</li>
        </ol>
        </li>
        <li>カスタム</li>
    </ol>
    <ol class="ex03">
        <li>画像背景</li>
        <li>画像背景</li>
        <li>画像背景</li>
    </ol>
    
    <p>入れ子になるとややこしいので、そのときは気をつけよう</p>
</div>

              
.ex02,
.ex03 {
    /* olがはき出す数字を消す */
    list-style: none;
    /* 数字のカウントをリセットする */
    counter-reset: number;
    /* ブラウザデフォルトのパディングを消す */
    padding: 0;
}

.ex02 {
    li {
        line-height: 2;
        margin-bottom: 0.4em;
        &:before {
            counter-increment: number;
            content: counter(number);
            background: #ab5078;
            display: inline-block;
            width: 2em;
            height: 2em;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            margin-right: .3em;
        }
        
        >ol {
            counter-reset: number;
            list-style: none;
            li {
                &:before {
                    content: counter(number);
                    background: #CA7F9F;
                }
            }
        }
    }
}

.ex03 {
    li {
        line-height: 3;
        margin-bottom: 0.4em;
        &:before {
            counter-increment: number;
            content: counter(number);
            background: url(https://blog.quusookagaku.com/img/hoshi.svg);
            display: inline-block;
            width: 3em;
            height: 3em;
            background-size: cover;
            text-align: center;
            line-height: 3;
            color: #fff;
            text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
        }
    }
}


/* サンプル画面用 */

html,
body {
    margin: 0;
    padding: 0;
}

.header {
    background: #ab5078;
    padding: 2em 0;
    color: #fff;
    width: 100%;
}

.title {
    margin: 0;
    text-align: center;
    text-shadow: 3px 3px 0 #ab5078, 6px 6px 0 rgba(0, 0, 0, 0.3);
}

.wrap {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    ol {
        li {}
    }
}