Why does the list style disappear when display: block is added to a list item in a list ( or )?

Question

This seems to valid for display: inline; and display: inline-block; too.

This is what I mean:

ul li {
  display: block;
  /         


        

Answer 1

Solution for ul

ul {
    list-style: none;
    display: block;
    padding: 0;
}

ul li::before {
  content: "• ";
}


  
list item1
  
list item3
  
list item3

Solution for ol using counter-increment

ol {
    list-style: none;
    display: block;
    padding: 0;
    counter-reset: my-counter;
}

ol li {
  counter-increment: my-counter;
}

ol li::before {
  content: counter(my-counter) ". ";
}


  
list item1
  
list item3
  
list item3