user12586 user12586 - 7 months ago 25
HTML Question

how to create multiple html ordered lists with different headers (edited)

I would like to create an ordered list like the one below. I appreciate your help.




We first collect the following equipments:

Equipment 1: Driver's license.

Equipment 2: Credit card.

Equipment 3: Laptop.

Equipment 4: ...

Then we check the car in the following steps:

Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.

Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.

Step 3: Ask someone to stand behind your car to check the lights.

Step 4: ...

Answer

Give this a try

ol.step {
  margin-left: 0;
  counter-reset: list 0;
}

ol.step > li {
  list-style: none;
}

ol.step > li:before {
  counter-increment: list;
  content: "Step " counter(list) ": ";
  float: left;
  width: 3.5em;
}

ol.equipment {
  margin-left: 0;
  counter-reset: equipment 0;
}

ol.equipment > li {
  list-style: none;
}

ol.equipment > li:before {
  counter-increment: equipment;
  content: "Equipment " counter(equipment) ": ";
  float: left;
  width: 6em;
}
<h2>List 1</h2>
<ol class="equipment">
  <li>Driver's license.</li>
  <li>Credit card.</li>
  <li>Laptop.</li>
</ol>
<h2>List 2</h2>
<ol class="step">
  <li>I would like to create an ordered list like the one below. I appreciate your help.</li>
  <li>Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
  <li>Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
  <li>Ask someone to stand behind your car to check the lights.</li>
</ol>

https://jsfiddle.net/3z7y7vjr/5/

Comments