リストol 番号をデザインする

css

2018/08/27

丸数字を実装するスタイルシートのテクニック

対応ブラウザはすべてのモダンブラウザで、IEは8+

html

<ol>
  <li>順序付きリスト</li>
  <li>順序付きリスト</li>
  <li>順序付きリスト</li>
  <li>順序付きリスト</li>
  <li>順序付きリスト</li>
</ol>

<ol>

<li>順序付きリスト</li>

</ol>

css

ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
}
 
li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #bada55;
  color: #222;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}

ol {

counter-reset: my-counter;

list-style: none;

padding: 0;

}

li {

margin-bottom: 10px;

padding-left: 30px;

position: relative;

}

li:before {

content: counter(my-counter);

counter-increment: my-counter;

background-color: #bada55;

color: #222;

display: block;

float: left;

line-height: 22px;

margin-left: -30px;

text-align: center;

height: 22px;

width: 22px;

border-radius: 50%;

}