How to Create Ordered Lists Without Periods in HTML and CSS?

Creating Ordered Lists Without Periods

Many developers seek methods to create ordered lists without the traditional period or number character following each item. While previously believed to be impossible, HTML and CSS now offer a solution through the proper implementation of list-style-type and pseudo-selectors.

CSS Solution

To eliminate the periods, utilize the following CSS code:

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

By setting 'list-style-type' to 'none,' you remove the default bullet or number character. 'counter-increment' creates a counter for each list item, displayed in the ':before' pseudo-selector. The 'content' property sets the counter value as the list item's content. You can adjust the 'width' property to control the number width.

Fallback for Older Browsers

For Internet Explorer 6 and 7 browsers, add the following CSS to restore the default list-style:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

The above is the detailed content of How to Create Ordered Lists Without Periods in HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!