根据孩子的数字自动化伪元素的内容值

Question

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

例如，我的列表中有 10 个项目，然后我必须使用 li:nth-child:before将它们在列表中的位置放入 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 项。

Fiddle 可用here

Answer 1

我认为您正在寻找此解决方案。它部分由 jQuery 和 CSS 完成。希望它能解决您的目的：

$(document).ready(function() { 
	$("ul.numeric li").each(function(){
  	    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 2

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

Answer 3

反增量属性呢？

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 4

需要考虑的两件事：

1. 有no way可以通过javascript设置:after伪元素的内容
2. 你不应该使用 javascript 来做这样的事情，因为在 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;
}