I want to change the list style to numbers that i want

Question

So, I've tried to change it and I found a way but I don't think that's the correct way, because I changed every single "li".

Is there a professional way?

and thanks

.ul-list {
  display: flex;
  background-color: #eeeeee;
  color: black;
  width: 400px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ul-list .ol-html {
  margin: 20px;
  list-style-type: none;
}

.ul-list .ol-html #slim::before {
  content: counter(number) ".";
  counter-increment: number 10;
}

.ul-list .ol-html #pugjs::before {
  content: counter(number) ".";
  counter-increment: number 11;
}

.ul-list .ol-html #haml::before {
  content: counter(number) ".";
  counter-increment: number 12;
}

<ul class="ul-list">
  <li>
    HTML
    <ol class="ol-html">
      <li id="slim">Slim</li>
      <li id="pugjs">Pugjs</li>
      <li id="haml">HAML</li>
    </ol>
  </li>
</ul>

If you just want to change start number, see [this(Is it possible to specify a starting number for an ordered list?)](https://stackoverflow.com/questions/779016/is-it-possible-to-specify-a-starting-number-for-an-ordered-list) — Shuo, Mar 06 '23 at 03:46
yes, and thank you very much, i've found the answer and it's like this — Abdalmalk kasem, Mar 06 '23 at 19:24

score 2 · Accepted Answer · answered Mar 06 '23 at 03:46

2

You can add any styles to your lists, it can be numbers, emojis

li {
  list-style-type: thumbs;
}

@counter-style thumbs {
  system: cyclic;
  symbols:   ;
  suffix: " ";
}

<ul>
  <li><i class="bi bi-check"></i> Buy Milk</li>
  <li><i class="bi bi-check"></i> Buy Egg</li>
  <li><i class="bi bi-check"></i> Buy Bread</li>
</ul>

answered Mar 06 '23 at 03:46

buzz

896
2
10
22

I was trying to do a counter start from 10 but using CSS only – Abdalmalk kasem Mar 06 '23 at 04:23
@Abdalmalkkasem in that case you can use `start` attribute in your `ol`. For example `
`
– buzz Mar 06 '23 at 04:29
1

and with CSS you can check this link https://jsfiddle.net/m8uhoatc/6/ – buzz Mar 06 '23 at 04:33

score 1 · Answer 2 · answered Mar 06 '23 at 03:46

If your goal it's to start the counter for the ol.ol-html at 10 you can use the start attribute on the ol

.ul-list {
  display: flex;
  background-color: #eeeeee;
  color: black;
  width: 400px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ul-list .ol-html {
  margin: 20px;
}

<ul class="ul-list">
  <li>
    HTML
    <ol class="ol-html" start="10">
      <li id="slim">Slim</li>
      <li id="pugjs">Pugjs</li>
      <li id="haml">HAML</li>
    </ol>
  </li>
</ul>

I know i can, but I was trying to do it using CSS – Abdalmalk kasem Mar 06 '23 at 04:22 — Abdalmalk kasem, Mar 06 '23 at 04:22

score 1 · Answer 3 · answered Mar 06 '23 at 05:15

I found the answer.

So if we want to start attributing for an ordered list using only CSS we will use counter-increment property.

Example:

  ol {
      list-style: none;
      counter-increment:start 9;
}

   li::before {
      content: counter(start, decimal) ". ";
      counter-increment: start;
}

<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

so here counter-increment it's 0-indexed, so to get a list that starts at 10, use 9

I want to change the list style to numbers that i want

3 Answers3