How to Remove the Period from Ordered Lists in HTML and CSS?

Customizing Ordered Lists in HTML and CSS

Ordered lists are a valuable tool for presenting information in a sequential manner. However, the default styling often includes a period after each number, which may not always be desirable. This article explores how to customize ordered lists and remove the period separator.

Creating Ordered Lists Without a Period

Traditionally, removing the period from an ordered list required creating a custom class for each number and using the list-style-image property. However, a CSS-only solution exists that is both elegant and semantic:

<code class="css">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;
}</code>

This solution uses CSS counters and the :before pseudo-element to generate custom numbering. The list-style-type property is set to none to remove the default bullets or numbers. The counter-reset property ensures that the counter starts from 1.

Browser Compatibility

It's important to note that this solution relies on the :before pseudo-selector, which is not supported by IE6 and IE7. For these browsers, an additional CSS rule can be added:

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

This rule overrides the custom styling and ensures that IE6 and IE7 display the default numbered list.

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