【CSS】リスト番号を自動で表示する方法

以下のようなリストを作ってみます。<li>を増やせば、自動でリスト番号がふられていくようにします。

 <ol>
    <li>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Recusandae culpa, optio voluptates nemo ex ea cupiditate,
    </li>
    <li>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Recusandae culpa, optio voluptates nemo ex ea cupiditate,
    </li>
    <li>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Recusandae culpa, optio voluptates nemo ex ea cupiditate,
    </li>
    <li>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Recusandae culpa, optio voluptates nemo ex ea cupiditate,
    </li>
    <li>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Recusandae culpa, optio voluptates nemo ex ea cupiditate,
    </li>
  </ol> 

  .content ol {
    position: relative;
    counter-reset: number-ol;   /*ポイント*/
  }
  .content ol > li:before {
    position: absolute;
    counter-increment: number-ol;   /*ポイント*/
    content: counter(number-ol);    /*ポイント*/
    background: #2581c4;
    color: #fff;
    border-radius: 50%;
    left: -30px;
    width: 25px;
    text-align: center;
    text-indent: 0;
  }  

<ol>内にcounter-reset: number-ol;を指定。

<li>の疑似要素::beforeに
counter-increment: number-ol;
content: counter(number-ol);
を指定。

ロリポップ！レンタルサーバー SAMURAI ENGINEER(侍エンジニア)｜無料カウンセリング予約