東京都府中市のWEB制作会社Maromaroのブログです

丸カッコ番号付きのリスト

  • RESULT
  • HTML
  • CSS
    1. list
    2. list
    3. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • コピー
    <div class="msr_list07">
      <ol>
        <li>list</li>
        <li>list</li>
        <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
      </ol>
    </div>
  • コピー
    .msr_list07 ol {
      padding-left:2.5em;
      line-height: 150%;
      padding-bottom: 15px;
      list-style: none;
      counter-reset: ol_li;
    }
    .msr_list07 ol > li{
      margin-bottom:10px;
      list-style-type:none;
      position:relative;
    }
    .msr_list07 ol > li::before{
      counter-increment: ol_li;
      content: "("counter(ol_li)")";
      color:#FF4A15;
      display:block;
      position:absolute;
      left:-2.5em;
      top:1px;
    }
    .msr_list07 li ul,
    .msr_list07 li ol{
      margin-top:5px;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari
  • このエントリーをはてなブックマークに追加

その他のリスト

リストの一覧をもっと見る

要素一覧