たまーに約款とかをサイトに載せてって時に原稿をもらうと
(1)ほにゃらら~~~~
(2)なんちゃら~~~~
みたいなやつに遭遇する時があります。
list-styeのプロパティにはイロハまであるというのにこのカッコ付というのがない。
こういうのを用意しといてくれても良さそうなもんなんだけども・・
しかし、beforeとafter使ってなんとか出来るのではないかと模索。
まずはhtml部分。
< ol class = "parentheses" > < li >あいうえお</ li > < li >かきくけこ</ li > < li >さしすせそ</ li > </ ol > |
そして、CSSはこれで。
ol.parentheses{ padding : 0 0 0 2em ; margin : 0 ; } ol.parentheses li{ list-style-type : none ; list-style-position : inside ; counter-increment : cnt; } ol.parentheses li:before{ display : marker ; content : "(" counter (cnt) ") " ; } |
これで簡単に実現できます。
この中で見慣れないのがcounter-incrementというプロパティですが、
カウンタ名を定義すると繰り返しで出てくる場合にその数値を一つずつ進めてくれます。
カウンタ名の後に半角スペースを入れて整数値を入れるとその数だけカウンタが進みます。
今回はliタグに対してcntというカウンタ名を与えて、
beforeのcontentプロパティで前後にカッコを表示させているのです。
この方法だと第○位なんかもクラス名を指定するだけで実現出来るのでとても便利です。
が、例の如くIE7以下ではここに出てくる全ての物が非対応です。
でももうええんちゃうかな無視しても・・・・とは個人的な考え、です(笑)
ありがとうございます。大変参考になりました。