web-dev-qa-db-ja.com

CSSを使用して、順序付けされたリストアイテム番号に静的な文字列をプレフィックスとして付けるにはどうすればよいですか？

このHTMLが欲しい...

<ol style="list-style:decimal;">
<li>Apples</li>
<li>Oranges</li>
</ol>

...このようにレンダリングするには

Q1。りんご
Q2。オレンジ

つまり、自動生成された数値の前に静的文字列「Q」を付ける必要があります。

私は次のようなCSSを試しました：

ol li:before
{
  content:"Q";
}

しかし、それはこれを生み出します：

  1. QApples
  2. Qオレンジ

「list-style：numberedinside;」も試してみましたが、リストが右に移動するだけで同じ結果になります。自動生成された数値要素を参照して、CSSスタイル情報を追加する方法が見つかりません。これは非常に単純で一般的なシナリオのように見えますが、単純なCSS（CSSカウンターやJavaScriptなどなし）でそれを実現する方法を見つけることができません。

htmlcssprefixhtml-lists
19
Triynko

唯一の純粋なCSSの方法は、 counters ：です。

ol {
    counter-reset: item;
    list-style-type: decimal;
}

ol li:before {
    content: 'Q' counter(item, decimal) '. ';
    counter-increment: item;
}

これは、CSSカウンター（このようなユースケース用に特別に設計されたものです！）またはJavaScriptを使用する以外に実現することはできません。

ちなみに、 decimalではなく、numberedです 。

37
BoltClock

、fragile、非カウンターメソッドがありますが、壊れやすいです：

ol {
    list-style-type: decimal;
    margin: 0 0 0 2em;
}

li {
    position: relative;
}

ol li:first-letter {
    color: #f90;
    float: left;
    position: relative;
    margin-left: -2em;
}

JS Fiddle demo 。

2
David Thomas