子要素の番号に応じて擬似要素の内容値を自動化

Question

子要素の番号がクラスに応じて擬似要素の内容の値を自動化する方法はありますか？それが理にかなってほしい。

たとえば、私は私のリストに10個の項目があり、リストにある場所をcontentに入れなければなりません。li:nth-child:before 1、2、3、4、5などを入れなければなりません。最後の項目が宣言されるまでリストに100項目ある場合は適切ではありません。

これはCSSでのみ可能ですか？もしかするとjavascriptやjqueryが適切なソリューションを提供するのに十分かもしれません。

HTML

ダミーテキスト1

ダミーテキスト2

ダミーテキスト3

ダミーテキスト4

ダミーテキスト5

ダミーテキスト6

ダミーテキスト7

lorem ipsum 8

ダミーテキスト9

ダミーテキスト10

CSS

ul.numeric {float:left; width:100%; list-style-type:none; position:relative;} 
ul.numeric li {position:relative; padding-left:40px; line-height:40px;} 
    ul.numeric li:after { content: ''; position: absolute; display: inline-block; top: 0; left: 3px; line-height: 32px; width: 32px; height: 32px; padding: 0; background: url(/Images/star-yellow.png) left center no-repeat; background-size: 100%; font-size: 18px; text-align: center; color: #565656; font-family: Georgia, sans-serif;} 
    ul.numeric li:first-child:after {content:'1';} 
    ul.numeric li:nth-child(2):after {content:'2';} 
    ul.numeric li:nth-child(3):after {content:'3';} 
    ul.numeric li:nth-child(4):after {content:'4';} 
    ul.numeric li:nth-child(5):after {content:'5';} 
    ul.numeric li:nth-child(6):after {content:'6';} 

は基本的に現在の設定のみのみ項目6まで右コンテンツ値を提供するであろう。

here

Answer 1

何カウンタインクリメントについてプロパティ：それはあなたの目的を解決することを願っていますか？

ul.numeric { 
 
    counter-reset: element; 
 
    list-style: none; 
 
} 
 

 
ul.numeric li::before { 
 
    counter-increment: element;    
 
    content:counter(element); 
 
    font-family: Georgia, sans-serif; 
 
    color: gray; 
 
    font-size:20px; 
 
    margin-right:10px; 
 
}

<ul class="numeric"> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
</ul>

Answer 2

利用可能フィドル私はあなたがこのソリューションを探していると思います。 jQueryとCSSによって部分的に行われます。

$(document).ready(function() { 
 
\t $("ul.numeric li").each(function(){ 
 
    \t  var index = $(this).index(); //getting the current index of li element 
 
      $(this).attr('data-content',index+1); //setting up the 'data-content' custom attribute of the same li element which will be made visible via CSS 
 
     }); 
 
});

ul.numeric {float:left; width:100%; list-style-type:none; position:relative;} 
 
ul.numeric li {position:relative; padding-left:40px; line-height:40px;} 
 
    ul.numeric li:after { content: ''; position: absolute; display: inline-block; top: 0; left: 3px; line-height: 32px; width: 32px; height: 32px; padding: 0; background: url(/Images/star-yellow.png) left center no-repeat; background-size: 100%; font-size: 18px; text-align: center; color: #565656; font-family: Georgia, sans-serif;} 
 

 
ul.numeric li:after { 
 
    content: attr(data-content); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="numeric"> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
</ul>

Answer 3

body { 
    counter-reset: numeric; 
} 
    ul.numeric li:before { 
    counter-increment: numeric; 
    content: counter(numeric) " "; 
} 

Answer 4

二つの考慮すべき事柄：

1. の内容を設定するためno wayがあります：理由はそこにあなたがこのようなことを行うためにはJavaScriptを使用はずのjavascriptの
2. によってpseudoelement後jsがキックする前に若干の遅延があります。

したがって、バックエンドでリスト番号を生成するか、cssでリスト番号を生成する必要があります。

私はあなたの記述リストを使用することをお勧め：このためhttps://jsfiddle.net/t1j0kwdL/

dl { 
    counter-reset: lorem-counter; 
} 

dt { 
    display: inline; 
    margin-left: 5px; 

    &:before { 
    content: counter(lorem-counter); 
    counter-increment: lorem-counter; 
    display: inline; 
    } 
    &:after { 
    content: ''; 
    display: table; 
    clear: both; 
    } 
} 

dd { 
    display: inline; 
    margin-left: 0; 
}