javascript - 根据子元素的编号自动执行伪元素的内容值

Question

有什么方法可以根据类的子编号自动设置伪元素内容的值吗？我希望这是有道理的。

例如，我的列表中有 10 个元素，然后我必须使用 li:nth-child:beforeI 将它们在列表中的位置放入 content 中必须简单地输入 1、2、3、4、5... 等等，直到声明最后一项。如果列表有 100 个元素，则这是不合适的。

有什么方法可以只在 CSS 上实现这一点吗？如果是的话，javascript 或 jquery 可能足以提供正确的解决方案。

HTML

lorem ipsum 1

lorem ipsum 2

lorem ipsum 3

lorem ipsum 4

lorem ipsum 5

lorem ipsum 6

lorem ipsum 7

lorem ipsum 8

lorem ipsum 9

lorem ipsum 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 项的正确内容值。

FIdle 可用 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>