如何更改列表项的CSS内容属性

Question

我有以下代码，在其中我向每个li元素中的div项目添加了自动内容（从1开始的计数器）。 我为此使用css： content:counter(step)和counter-increment:step 。

一切正常，但是我希望列表中的最后一个元素显示自定义文本而不是计数器值（当前为5）。 我尝试了content:"MyText"但是没有用。 我如何才能实现列表中的最后一项？

请注意，我使用jquery添加了最后一个列表项，而我必须这样做。

 $(document).ready(function() { $('#progressbar').append('<li id="level4" data-levelscore="45" class="done" style="content:\\'A\\'">Completed</li>'); }); 

 body { background-color: #ccc; } #progressbar { margin-bottom: 5px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 10px; width: 20%; float: left; position: relative; text-align: center; } #progressbar li:before { content: counter(step); counter-increment: step; width: 15px; line-height: 15px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 80%; height: 2px; background: white; position: absolute; left: -40%; top: 7px; z-index: 1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after { background: #ffb723; color: white; } #progressbar li.done:before, #progressbar li.done:after { background: #42aacc; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="margin-top: 0.2em; width: 70%; float: left; text-align: left; color: white; "> <ul id="progressbar"> <li id="level1" data-levelscore="10" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 1">Level 1</li> <li id="level2" data-levelscore="25" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 2">Level 2</li> <li id="level3" data-levelscore="35" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 3">Level 3</li> <li id="level4" data-levelscore="45" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 4">Level 4</li> </ul> </div> 

Answer 1

如果您仅添加此规则，它将对我有用：

#progressbar li:last-child:before{
  content: "A";
}

Answer 2

 $(document).ready(function() { $('#progressbar').append('<li id="level4" data-levelscore="45" class="done" style="content:\\'A\\'">Completed</li>'); }); 

 body { background-color: #ccc; } #progressbar { margin-bottom: 5px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 10px; width: 20%; float: left; position: relative; text-align: center; } #progressbar li:before { content: counter(step); counter-increment: step; width: 15px; line-height: 15px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; position:relative; z-index:2; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 80%; height: 2px; background: white; position: absolute; left: -40%; top: 7px; z-index: 1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after { background: #ffb723; color: white; } #progressbar li.done:before, #progressbar li.done:after { background: #42aacc; color: white; } #progressbar li:last-child:before { content:"CUSTOM"; width:auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="margin-top: 0.2em; width: 70%; float: left; text-align: left; color: white; "> <ul id="progressbar"> <li id="level1" data-levelscore="10" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 1">Level 1</li> <li id="level2" data-levelscore="25" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 2">Level 2</li> <li id="level3" data-levelscore="35" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 3">Level 3</li> <li id="level4" data-levelscore="45" class="done" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="level 4">Level 4</li> </ul> </div> 

Answer 3

1）将添加的列表项（<li>）id更改为level5，您有重复的id，那不好。

2）使用此CSS更改该li的内容：

li#level5:before {
    content: 'someText';
}

JS小提琴