css - アステリックス付きのリストアイテム

Question

順序付きリストのアスタリスクをインクリメントすることは可能ですか？だから私が

<ol class="ast">
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
</ol>

それは私のページに次のように表示されます

*アイテム1
**アイテム2
***アイテム3

cssを使用していますか？

Answer 1

可能ですが、リストのスタイルを解除し（list-style:none）、「before：」疑似クラスを使用してアスタリスクを絶対位置に配置し、n-th子と組み合わせてアスタリスクの数を設定する必要があります。

このようなものですが、少し調整する必要があります。

ul, li {
   margin:0;
   padding:0;
  list-style:none      
}

li {
   padding-left:20px; 
}

li:nth-child(1):before {
   content: "*" 
}

li:nth-child(2):before {
   content: "**" 
}

Answer 2

CSSsymbols()関数を使用すると、探しているものに似たものを作成できます。

https://developer.mozilla.org/en-US/docs/Web/CSS/symbolsを参照してください。

例として、次のようなリストのスタイルを設定します。

ol {
  list-style: symbols(symbolic "*");
}

上記のコードは、必要に応じてそれぞれのアスタリスクの数を自動的に増やしますが、<li>アスタリスクの量は、必要なもののように右ではなく左に増加します。

また、特定の数のリストアイテムを超えると、アスタリスクの数が使用可能な空白を超えて増加します。この問題の例については、このデモを参照してください。

また、symbols()現在、FireFoxバージョン35以降でのみサポートされています。

Answer 3

任意の深さでそれを処理する方法があるとは思いません。diodeusのソリューションは、多くのCSSコードを犠牲にして、既知の最大深度を処理します。

Answer 4

方法が常にある：

ul {
     list-style: "*";
}

li {
     padding-left: 20px;
}

チャームのように機能します。