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

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;
}