HTML + CSS: Ordered List without the Period?

后端 未结 6 1927
再見小時候
再見小時候 2020-11-27 03:05

I think the answer to this question is no... but does anyone know of a an HTML/CSS way to create an ordered list without a period after the numbers? Or, alternatively, to sp

6条回答
  •  误落风尘
    2020-11-27 03:35

    This is perfectly possible to do with just CSS (2.1):

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

    Keep in mind that this solution relies on the :before pseudo-selector, so some older browsers -- IE6 and IE7 in particular -- won't render the generated numbers. For those browsers, you'll want to add an extra CSS rule that targets just them to use the normal list-style:

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

提交回复
热议问题