frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【CSSのみ】liに丸付き数字の連番を最も簡単につける方法(色付きも)

スポンサードリンク


スポンサードリンク


デザイナーが丸付き数字のデザインを挙げてくることはあるかと思います。
環境依存文字の①、②を打っても表示はされますが、手間なのでcssで自動で表示されるようにしましょう。
ちなみにcircled-decimalはchrome対象外なので、実質現実的な方法ではありません。

下記のようになります。

デモ


See the Pen
PVaYve
by funclur (@funclur)
on CodePen.

htmlは通常通りですね。

<ol class="list-01">
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
</ol>
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.list-01 {
    counter-reset: my-counter;
}
.list-01 > li {
    position: relative;
    padding-left: 20px;
}
.list-01 > li::before {
    content: counter(my-counter);
    counter-increment: my-counter;
    border: 1px solid #333;
    display: block;
    float: left;
    line-height: 1.5;
    text-align: center;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    font-size: 10px;
    color: #333;
    margin: 3px 3px 0 0;
    position: absolute;
    left: 0;
}

解説

1.まずol要素にlist-style: none;をして初期値として数字が自動で付与されるのをoffします。
2.代わりにol要素にcounter-resetプロパティを付与し値を任意の文字列(ここでは)my-counterにします。
3.liの疑似要素に、contentプロパティcounter(my-counter)、counter-incrementにmy-counter;とします。これで1ずつ繰り上がる数字が疑似要素につくようになりました。
4.あとは〇をborderとborder-radiusで作ります。
5.backgroundやcolorを変えれば色付きの丸付き数字が実現できます。


See the Pen
RvJwoy
by funclur (@funclur)
on CodePen.