How to Remove the Period After Ordered List Numbers in HTML and CSS?

Ordered Lists in HTML and CSS: Removing the Period

Creating an ordered list without the period after the numbers is possible using CSS. While you may assume it's not feasible, let's explore how you can achieve this.

To remove the period, style the list as such:

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}</code>

To create custom numbers, use the following code:

<code class="css">ol.custom > li {
  counter-increment: customlistcounter;
}

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

This will display custom numbers before each list item.

Keep in mind that this solution relies on the :before pseudo-selector, which may not work in older browsers like IE6 and IE7. To address this, use an additional CSS rule that targets these browsers specifically:

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

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