How to Create Ordered Lists Without a Period in HTML and CSS?

Creating Ordered Lists without a Period in HTML and CSS

Despite the common assumption that ordered lists in HTML must have a period after the number, it is feasible to create one without it.

CSS Solution

Instead of resorting to the unsemantic list-style-image approach, you can eliminate the period with CSS:

<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>

Note

This solution uses the :before pseudo-selector, which may not be supported in older browsers like IE6 and IE7. For these browsers, you can add an additional rule that targets only them to display the normal list style:

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

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