Blog

Issue

Default ordered list item style is decimal number, lower/upper alpha, lower/upper roman then followed by a dot. Thought it’s easy to change the dot to something like
  a) This is good 1st item
  b) This is good 2nd item.

      instead of:
  a. This is not good 1st item
  b. This is not good 2nd item

However, there’s no simple way to change the style of ordered list item and remove the dot after the order number <ol> <li></li></ol>.
As I got used to markdown’s convinence of auto numbering for ordered list items, don’t want to hard code the order into the list.

Solution

1. Removing the default ordering number and using counter by creating counter variable (say, list) like this
     ol { list-style-type: none; counter-reset: list;}
2. Update counter variable for each \
3. like this `ol>li { counter-increment: list; }
4. Display the content of the new counter like this `ol>li::before { content: counter(list, lower-alpha) ") "; }

Tricks

• It’s a bit complex for multi-level ordered list, but the principle still applies
• Some more has to be added to see hanging text like default ordered list display. This can be done by the following for modifying 2nd order level :

  ol ol {    
    list-style-type: none;    
    counter-reset: list;   
  }     
  ol ol>li::before {     
    content: counter(list, lower-alpha) ") 
  ol ol {    
    list-style-type: none;    
    counter-reset: list;   
  }     
  ol ol>li::before {     
    content: counter(list, lower-alpha) ") \00a0";
    display: inline-block;
    width: 1.5em;
    text-align: right;
  }    
  ol ol>li {    
    counter-increment: list;    
    margin-left: .5em;    
    text-indent: -1.5em;    
  } 
  a0";
    display: inline-block;
    width: 1.5em;
    text-align: right;
  }    
  ol ol>li {    
    counter-increment: list;    
    margin-left: .5em;    
    text-indent: -1.5em;    
  } 
  

  Of course, several paramenters can be adjusted to fit into each individual case. These include margin-left, text-indent spaces and the counter number style, i.e. lower-alpha, lower-roman, decimal, etc.