コニファ・ロゴ

csstest:CSS list要素のmarkerを括弧付きの数字にする

listのmarkerを括弧付きの数字にします。

もっとも簡単な方法

「list-style-type:none」で定義済みスタイルのmarkerを消し、「(1)」などの括弧付きの数字テキストを手入力で順に付けていきます。このサンプルのようにリストの数が少ない場合は、これで対応できますが、数が多くなると、連番の確認に手間取りそうです。
  1. (1)ダミーテキスト・津輕海峽の青々とした一帶の秋潮を隔てゝ、遙に津輕の地方が水平線上に浮いて居る。
  2. (2)ダミーテキスト・本郷へ來ると、彼醉僧は汽車を下りて、富士形の黒帽子を冠り、小形の緑絨氈のカバンを提げて、蹣跚と改札口を出て行くのが見えた。
  3. (3)ダミーテキスト・江刺へ十五里、と停車場の案内札に書いてある。

HTMLソース

  <ol class="paren0">
    	<li>(1)ダミーテキスト・津輕海峽の青々とした一帶の秋潮を隔てゝ、遙に津輕の地方が水平線上に浮いて居る。</li>
	<li>(2)ダミーテキスト・本郷へ來ると、彼醉僧は汽車を下りて、富士形の黒帽子を冠り、小形の緑絨氈のカバンを
        提げて、蹣跚と改札口を出て行くのが見えた。</li>
        <li>(3)ダミーテキスト・江刺へ十五里、と停車場の案内札に書いてある。</li>
  </ol>

:before疑似要素を使って、括弧と自動連番を追加

上の方法では、記述間違いなど手入力のミスが起こりやすくなります。そこで、定義済みスタイルのmarkerを消した後、:before疑似要素を使って丸括弧とその中に入る数値を先頭に付けます。数値は、counter-incrementで自動連番にします。

  1. ダミーテキスト・津輕海峽の青々とした一帶の秋潮を隔てゝ、遙に津輕の地方が水平線上に浮いて居る。
  2. ダミーテキスト・本郷へ來ると、彼醉僧は汽車を下りて、富士形の黒帽子を冠り、小形の緑絨氈のカバンを提げて、蹣跚と改札口を出て行くのが見えた。
  3. ダミーテキスト・江刺へ十五里、と停車場の案内札に書いてある。

HTMLソース

  <ol class="paren">
    	<li>ダミーテキスト・津輕海峽の青々とした一帶の秋潮を隔てゝ、遙に津輕の地方が水平線上に浮いて居る。</li>
	<li>ダミーテキスト・本郷へ來ると、彼醉僧は汽車を下りて、富士形の黒帽子を冠り、小形の緑絨氈のカバンを
        提げて、蹣跚と改札口を出て行くのが見えた。</li>
        <li>ダミーテキスト・江刺へ十五里、と停車場の案内札に書いてある。</li> 
   </ol>

CSSソース

    ol.paren li  {
        list-style-type:none;
        counter-increment: cnt;
        text-indent:-2.5em;
        padding:0;
        }
    ol.paren0 li  {
        list-style-type:none;
        text-indent:-3em;
        padding:0;
        }
    ol.paren li:before  {
        display: marker;
        content: "( "counter(cnt) " ) ";
        }

 

戻るボタン