How Can I Create Ordered Lists in HTML/CSS Without Periods?

Creating Ordered Lists in HTML/CSS without Periods

Ordered lists are commonly displayed with periods following the list numbers. However, what if you need to customize the appearance by removing these periods? Here's an exploration of the HTML and CSS solutions available.

As mentioned by the user, CSS provides a means to achieve this through custom styling. The key CSS properties to modify are:

• list-style-type: To remove the default period and apply a new type.
• counter-increment and counter-reset: To create a custom counter that will generate the list numbers.
• content: To use the generated counter within pseudo-elements.

The following CSS code demonstrates the desired functionality:

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

By combining these CSS properties, you can create an ordered list that displays the numbers without periods. Additionally, the counter-increment: customlistcounter; property allows you to specify an alternate separator character if desired.

However, it's worth noting that some older browsers, such as IE6 and IE7, do not support the :before pseudo-selector. To ensure compatibility, consider adding an extra CSS rule to target these browsers and use the native list-style appearance:

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

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