Custom List Style for Ordered Lists

Custom list style for ordered lists

You can use css counter and :before pseudo-element to create this type of list.

ol {

  counter-reset: custom;

  list-style-type: none;

}

ol li:before {

  content: '('counter(custom)') ';

  counter-increment: custom;

}

<ol>

   <li>Item 1</li>

   <li>Item 2</li>

   <li>Item 3</li>

</ol>

How to do css style for ordered list numbers?

custom-counter is an invalid selector and even if it was valid, it would be pointing to nothing. Just remove that whole ruleset and then add list-style-type: none; to the <ol> as in:

ol {list-style-type: none;}

Assign position:relative to all <li> and position:absolute to each li::before in order to have granular control over all bullet distances from text.

li {
  position: relative;
...
}

li::before {
...
  position: absolute;
  top: -1px;
  /* Adjust < -number | number+ > */
  left: -32px;
...

:root {

  font: 400 16px/1.25 Verdana

}

ol {

  list-style-type: none;

}

ol li {

  counter-increment: step-counter;

  position: relative;

  margin: 10px 0 0 0;

}

ol li::before {

  content: counter(step-counter);

  display: block;

  position: absolute;

  top: -1px;

  /* Adjust < -number | number+ > */

  left: -32px;

  width: 1.25rem;

  height: 1.25rem;

  line-height: 1.25rem;

  background-color: rgb(0, 200, 200);

  color: white;

  font-weight: bold;

  font-size: 0.8rem;

  text-align: center;

  border-radius: 15px;

}

<ol>

  <li>This is the first item</li>

  <li>This is the second item</li>

  <li>This is the third item</li>

  <li>This is the fourth item</li>

  <li>This is the fifth item</li>

  <li>This is the sixth item</li>

</ol>

How can you customize the numbers in an ordered list?

This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):

ol {

  counter-reset: item;

  margin-left: 0;

  padding-left: 0;

}

li {

  display: block;

  margin-bottom: .5em;

  margin-left: 2em;

}

li::before {

  display: inline-block;

  content: counter(item) ") ";

  counter-increment: item;

  width: 2em;

  margin-left: -2em;

}

<ol>

  <li>One</li>

  <li>Two</li>

  <li>Three</li>

  <li>Four</li>

  <li>Five</li>

  <li>Six</li>

  <li>Seven</li>

  <li>Eight</li>

  <li>Nine<br>Items</li>

  <li>Ten<br>Items</li>

</ol>

Can you style ordered list numbers?

You can do this using CSS counters, in conjunction with the :before pseudo element:

 ol {

   list-style: none;

   counter-reset: item;

 }

 li {

   counter-increment: item;

   margin-bottom: 5px;

 }

 li:before {

   margin-right: 10px;

   content: counter(item);

   background: lightblue;

   border-radius: 100%;

   color: white;

   width: 1.2em;

   text-align: center;

   display: inline-block;

 }

<ol>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

</ol>

HTML Custom List Ordering (alphabetic list with non-english characters)

Normally, lists don't work like that. With a list-style-type of lower-latin, only the lowercase latin letters will be displayed. After "z", it continues with "aa" and so on.

However, it's perfectly possible to do what you want with a bit of customised CSS.

li[value] {list-style-type:none; position:relative}

li[value]::before {content:attr(value) '. ';

position:absolute; right:calc(100% + .33em);}

<ol type="a">

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li value="ç">Item 4</li>

    <li>Item 5</li>

</ol>

html css styled ordered list, positioned outside and with custom counter

you can also set position: absolute on the before pseudo-element and position: relative on the li and then position the former relatively to its parent.

DEMO

CSS: Create custom list bullets

LIVE DEMO

/* HTML*/

        <ul>
    <li>Point one <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Point two <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>Point three <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>Point four <br>Lorem adipiscing elit. </li>
    <li>Point five <br> Lorem consectetur adipiscing elit.</li>
    </ul>
    /*CSS*/
        ul{list-style:none; padding:0}
    ul li {
        display: block;
        position: relative;
        padding: 0 0 0 40px;
        min-height:50px
    }
    li:last-child:after {display:none}
    ul li:after {
        content: '';
        top: 11px;
        left: 0;
        background-color: #000;
        height: 100%;
        width: 2px;
        position: absolute;
    }

    ul li:before {
        content: '';
        top: 10px;
        left: 0;
        background-color: #000;
        height: 2px;
        width: 30px;
        position: absolute;
    }

Custom ordered list with paragraphs CSS

As @Temani Afif mentioned, you could add inline-block to the p - like this:

.custom li > p {
  display: inline-block;
  margin: 2px; /* you can also adjust your margins/padding if you wish */
}

UPDATE

Based on the comments (and updated question) if you have multiple paragraphs on the same <li> then you can add different styles for the first p in the list and the rest of the ps on the list. Something along the lines of:

.custom li > p {
  margin: 2px;
}

.custom li > p + p {
  display: block; 
  margin: 0 1.1em;
  list-style-type: none;
}

.custom li > p:first-of-type {
  display: inline-block;
}

See demo code below..

Updated demo code based on comments

.custom {

  list-style-type: none;

  counter-reset: elementcounter;

}

.custom li:before {

  content: counter(elementcounter) ". ";

  counter-increment: elementcounter;

}

.custom li > p {

  margin: 2px;

}

.custom li > p + p {

  display: block; 

  margin: 0 1.1em;

  list-style-type: none;

}

.custom li > p:first-of-type {

  display: inline-block;

}

<ol>

  <li>

    <p>Places nicely on the same line.</p>

  </li>

  <li>

    <p>Places nicely on the same line.</p>

  </li>

</ol>

<ol class="custom">

  <li><p>Places poorly on the second line.</p></li>

  <li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>

  <li><p>Places poorly on the second line.</p></li>

  <li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>

</ol>

---

Related Topics