番号付きリストの番号をスタイルする方法を見つけようとしています。背景色、境界線の半径、色を追加して、作業中のデザインに一致するようにします。
私はそれが不可能であり、各番号に異なる画像を使用する必要があると推測しています。
ol li:first-child{list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} etc...
私はスプライトを使用してこれをわずかに改善できると考えていましたが、もっと簡単な解決策はありますか?
これを行うには、 CSS counters を:before
疑似要素と組み合わせて使用します。
ol {
list-style: none;
counter-reset: item;
}
li {
counter-increment: item;
margin-bottom: 5px;
}
li:before {
margin-right: 10px;
content: counter(item);
background: lightblue;
border-radius: 100%;
color: white;
width: 1.2em;
text-align: center;
display: inline-block;
}
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
別の何かを探していて、CodePenでこの例を見つけました。
これを試してください: http://codepen.io/sawmac/pen/txBhK
body {
font-size: 1.2em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 50px;
}
.custom-counter {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom-counter li {
counter-increment: step-counter;
margin-bottom: 5px;
}
.custom-counter li::before {
content: counter(step-counter);
margin-right: 20px;
font-size: 80%;
background-color: rgb(180, 180, 180);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 11px;
}
<ol class="custom-counter">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
<li>This is the fourth item</li>
<li>This is the fifth item</li>
<li>This is the sixth item</li>
</ol>