Question

有什么方法可以自动化我的伪元素的内容值，具体取决于该类的子编号是什么？我希望它有意义。

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

可以使用here

Answer 1

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

＆＃13;

$(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
        });
});

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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

需要考虑两件事：

有no way设置内容：javascript
你不应该使用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;
}

自动化伪元素的内容值，具体取决于孩子的数字

4 个答案: