Question 46138 in CSS Question posted in
Some basic documentation can be found here.

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

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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search