如何在 html 列表 (ol/ul) 中为不同的项目 (li) 放置不同的项目符号？

Question

I would like li that have "ok" class to display a checked mark and li that have "ko" class to display a cross mark.

I am displaying thumbs up by default only for debug purpose in this example:

 ol { padding-left: 30px; list-style: none; } li:before { margin-left: -20px; margin-right: 10px; content: '\1F44D'; }.ok li:before { content: '\2714'; }.ko li:before { content: '\274C'; }

 <ol id="opponentsOfCivOL"> <li class="ok">1</li> <li class="ok">1</li> <li class="ok">1</li> <li class="ko">1</li> <li class="ok">1</li> </ol>

What am I missing to make this work?

Answer 1

Change your CSS for .ok and .ko . Instead of it being .ok li:before it should be li.ok:before .

li.ok is read as find all elements with tag li with class name ok .

Whereas .ok li is read as find all elements with class name ok and all elements with tagname li inside it.

li.ok:before {
  content: '\2714';
}

li.ko:before {
  content: '\274C';
}

Answer 2

The classes "ok" and "ko" belong to the lis and have to be in the the css after "li".

Working example :

 ol { padding-left: 30px; list-style: none; } li:before { margin-left: -20px; margin-right: 10px; content: '\1F44D'; } li.ok:before { content: '\2714'; } li.ko:before { content: '\274C'; }

 <ol id="opponentsOfCivOL"> <li class="ok">1</li> <li class="ok">1</li> <li class="ok">1</li> <li class="ko">1</li> <li class="ok">1</li> </ol>

Answer 3

Your css selector for li with the classes is incorrect. See more here

 ol { padding-left: 30px; list-style: none; } li:before { margin-left: -20px; margin-right: 10px; content: '\1F44D'; } li.ok:before { content: '\2714'; } li.ko:before { content: '\274C'; }

 <ol id="opponentsOfCivOL"> <li class="ok">1</li> <li class="ok">1</li> <li class="ok">1</li> <li class="ko">1</li> <li class="ok">1</li> </ol>