続・すみっこの記

富山生まれ下請けIT育ちのフリーライターが布団の中からお送りします

CSSで米印つきの<ul>、<ol>リストを作る

商品の注釈なんかで

※1 注釈だよ
※2 注釈だよ
※3 注釈だよ

とか

※注釈だよ
※注釈だよ
※注釈だよ

みたいなリストを作りたいことがあるじゃないですか。

こういう場合のCSS指定を毎回忘れるのでメモしておきます。

米印つきの<ol>

CSS

ol.asterisk {
  counter-reset: number;
  list-style: none;
}
ol.asterisk li:before {
  counter-increment: number;
  content: "※"counter(number)" ";
}

表示結果

  1. 注釈1
  2. 注釈2
  3. 注釈3

米印つきの<ul>

CSS

ul.asterisk li {
  list-style-type: none;
  text-indent: -1em;
}
ul.asterisk li:before {
  display: inline;
  content: "※";
}

表示結果

  • 注釈1
  • 注釈2
  • 注釈3

参考サイト

 

CSS3&jQueryで作る スマートフォンサイトUI図鑑 (Web Professional Books)

CSS3&jQueryで作る スマートフォンサイトUI図鑑 (Web Professional Books)

 
すべての人に知っておいてほしいHTML5 & CSS3 の基本原則

すべての人に知っておいてほしいHTML5 & CSS3 の基本原則

 
track feed すみっこの記