automate the content value of pseudo element depending which number the child is

Question

Is there any way I can automate the value of content of my pseudo element depending what the child number does the class is? I hope it make sense.

For example I have 10 items in my list then I have to put what place they are on the list into the content using li:nth-child:beforeI have to simple put 1, 2, 3, 4, 5... and so on until the last item is declared. which is not appropriate if the list have 100 items.

Is there any way this is possible only on CSS? if so possibly javascript or jquery might be good enough to provide the right solution.

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

Basically the current setup would only provide the right content value up to item 6 only.

FIddle available here

score 1 · Answer 1 · answered May 27 '16 at 09:19

I think you are looking for this solution. Its done partly by jQuery and by CSS. Hope it will solve your purpose:

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

Thanks for this! this works perfectly using jquery and css – MIke May 27 '16 at 09:48 — MIke, May 27 '16 at 09:48

score 1 · Answer 2 · answered May 27 '16 at 09:36

1

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

answered May 27 '16 at 09:36

HudsonPH

1,838
2
22
38

score 1 · Accepted Answer · answered May 27 '16 at 09:36

What about counter-increment property?

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>

I'll check on this solution. Not quite sure on the compatibility if its going to support on lower versions but thanks! — MIke, May 27 '16 at 09:47

score 0 · Answer 4 · edited May 23 '17 at 12:14

Two things to consider:

There is no way to set content of :after pseudoelement by javascript
You shouldnt use javascript to do things like this because there will be a slight delay before js kicks in.

So either you generate the list numbers by backend or you have to do it by css.

I suggest you using description list: 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;
}

automate the content value of pseudo element depending which number the child is

4 Answers4