URLのCSSカウンタ

Question

私はリストアイテムの横にある画像をその位置に基づいて動的に設定することに興味があります。私はCSSのカウンタ機能を使ってリストアイテムを追跡しており、カウンタを使って画像をリストスタイルタイプとして指定しようとしていることを、以下で見ることができます。

ul{ 
    counter-reset:list; 
} 
li 
{ 
    counter-increment:list; 
    list-style:disc outside url("http://dummyimage.com/" counter(list) "x" counter(list) ""); 
} 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

正しい方法でURLを宣言することができますか？それも可能ですか？

Answer 1

複数の文字列からURLを構成することはできません

012例えば

、この作品：

url("http://dummyimage.com/10x10"); 

が、これは動作しません：

url("http://dummyimage.com/" "10x10"); 

カウンタが一方それ

とは何の関係もありません、あなたは可能性があり変数を使ってそれを行うことができたら、AxCSのためにLessCSSを見てみましょう。

Answer 2

counter()機能は、contentプロパティでのみ使用できます。上に作成しようとしているようなURLの構成は、CSSでは不可能です。

Answer 3

私はあなたが達成しようとしているか、わからないんだけど、ここであなたが有用見つける気にサンプルコードがあります：sample code

HTML

<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

CSS

ul { counter-reset: list; } 
li { 
    counter-increment: list; 
    list-style: disc outside url("http://placekitten.com/20/20"); 
} 
li:before { 
    counter-increment: section; 
    content:"Item " counter(list) ". "; 
}