▲TOPへ戻る

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

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

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae culpa, optio voluptates nemo ex ea cupiditate,
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae culpa, optio voluptates nemo ex ea cupiditate,
  3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae culpa, optio voluptates nemo ex ea cupiditate,
  4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae culpa, optio voluptates nemo ex ea cupiditate,
  5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae culpa, optio voluptates nemo ex ea cupiditate,
HTML
 <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> 
CSS
  .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;
  }  
point

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

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

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<