ol要素の数字を丸数字にしたり色を変えたりカスタマイズする

  • 記事のタイトルとURLをコピー

olで作るリストの番号の出力の仕方を少しカスタマイズしたい場合に使います。丸数字は機種依存文字なのでCSSで表現したほうが良いです。

また、数字の部分だけ色を変えたり、数字のあとに任意の文字を追加したい場合もあります。
その場合、以下のCSSでbefore要素として出力すると解決できます。

スポンサーリンク

数字を表示させる

HTML

Sass/CSS

Sass

CSS

デモ

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト

このように数字を表示させることができました。
デモのように数字の色を変えたい場合は、before要素に対してcolorを指定してください。

数字の前後に任意の文字を表示させる

数字だけのこともあれば、「その1」、「1番」など数字の前後に文字をつけたいことがあります。beforeのcontent内counterの前後に指定をすればそれも可能です。

Sass/CSS

Sass

CSS

デモ

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト

このように数字のあとに文字を表示させることができました。

丸数字を表示させる

数字を表示させるbeforeに対してCSSを指定すれば丸数字にすることができます。

Sass/CSS

Sass

CSS

デモ

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト

このように丸数字を表示させることができました。

  • 記事のタイトルとURLをコピー