順序付きリスト番号のスタイルを設定できますか？

順序付きリストの番号のスタイルを設定しようとしています。背景色、境界線の半径、色を追加して、作業中のデザインと一致させたいと思います。

ここに画像の説明を入力してください

それは不可能だと思います。番号ごとに異なる画像を使用する必要があります。

ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} 
etc...

より簡単な解決策はありますか？

— Pixelomo
ソース

jsfiddle.net/viphalongpro/Hj8Nnところで、私のデモから解決策を調べることができます。これは検索が不可能ではないと思います。最初に検索すると、多くの結果が得られる可能性があります。SOでは、この種の質問は何度も尋ねました。

— キングキング

情報へのいくつかのリンク1.codeitdown.com/ordered-list-css-styles 2. css-tricks.com/numbering-in-styleそれは良いqtnですが、少し検索するだけで答えが得られるかもしれません

— クラフター

@KingKing -私は...その後、重複としてこれをマークすることをお勧めしたい

— リー・テイラー

回答:

189

これは、CSSカウンターを: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>

スニペットを展開

— SW4
ソース

counter-reset: item;それ以外の場合は、カウンタがネストされた<オール>でリセットされません、オールブロックに行く必要があります。

— マイケル・Klöpzig

良い解決策ですが、li要素の本体が複数の行である場合のレンダリングはどうですか？

— cmhughes 2018

私はのように、と思いstackoverflow.com/questions/13354578/...、あなたは一例`のmargin-leftのために使用することができます。-2.0em。幅：-2.0em; `

— cmhughes 2018

円を取得するには50%、border-radius（ではなく100%）の値で十分です。（たとえば、Lea Verou、「border-radius：50％の奇妙なケース」、2010年10月30日を参照してください。）

— JimRatliff19年

@ cmhughes-それをしたい場合は、を与え、li position: relative;次にそれを:before与えてposition: absolute;から使用しtop、left好きなように正確に配置します。

— マイク

私は何か違うものを探していて、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>

スニペットを展開

— ラス
ソース