"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > How to Remove the Period After Ordered List Numbers in HTML and CSS?

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

Posted on 2025-03-13
Browse:408

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:

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

To create custom numbers, use the following code:

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

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

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:

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

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3