how to change css content attribute of a list item

Question

I have the following code where I add an automated content (a counter starting from 1) to div items within each li element. I use css for this : content:counter(step) and counter-increment:step .

Everything works fine however I want the last element in the list to display a custom text instead of the counter value (which is 5 currently). I tried content:"MyText" but did not work. How can I achieve this for the last item in the list?

Note that I add the last list item using jquery, and I have to do it this way.

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

If you just add this rule it did it for me:

#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) Change the added list item (< li >) id to level5, you have duplicated ids, and thats not good.

2) Use this CSS to change the content of that li:

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

JS Fiddle