HTML + CSS: Ordered List Without the Period

HTML + CSS: Ordered List without the Period?

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 */
}

How to remove dot . after number in ordered list items in OL LI?

This will work in IE8+ and other browsers

ol { 
    counter-reset: item;
    list-style-type: none;
}
li { display: block; }
li:before { 
    content: counter(item) "  "; 
    counter-increment: item 
}

or even:

ol li:before {
  content: counter(level1) " "; /*Instead of ". " */
  counter-increment: level1;
}

If you want older browsers to be supported as well then you could do this (courtesy neemzy):

ol li a {
    float: right;
    margin: 8px 0px 0px -13px; /* collapses <a> and dots */
    padding-left: 10px; /* gives back some space between digit and text beginning */
    position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
    background-color: #333333; /* same background color as ol ; the dots are now invisible ! */
}

Remove the period from an ordered list that has specific values to the list number - css

What you want is perfectly possible with CSS if you use data attributes:

ol {    list-style:none;}li:before {    content:attr(data-value) ' ';}

<ol class="junkfood">    <li data-value="2">Cookies®</li>    <li data-value="1">Chocolate</li>    <li data-value="2">Brownies</li>    <li data-value="10">Ice cream sandwich</li></ol>

ol {  counter-reset: list;  padding: 0;  padding-left: 4em;  margin: 1em;}
ol>li {  list-style: none;  /* remove this line and you can see the 'real' numbering */}
ol>li:before {  content: counter(list) "— ";  counter-increment: list;  margin-left: -4em;  width: 2.5em;  display: inline-block;  text-align: right;}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos commodi perferendis nobis optio quaerat eveniet minus odio accusamus quo eos assumenda totam itaque ullam, voluptate sed! Dicta quae repudiandae voluptate debitis earum quis culpa, quas labore, reiciendis perspiciatis cum corporis exercitationem error expedita deserunt est vero quasi enim harum nisi.</p><ol>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li>  <li>Lorem ipsum dolor sit amet.</li></ol>

html {
  font: 300 2ch/1.2 'Segoe UI'
}

/* ::before Solution */
.A {
  list-style: none;
  margin-left: -1rem;
}

/* The "\a0" is a space */
.A li::before {
  content: counter(list-item)"\a0\a0";
}

/* ::marker Solution */
.B li {
  list-style: none;
  padding: 0;
}

.B li::marker {
  content: counter(list-item)"\a0\a0";
}

<ol>
  <li>Default style of <ol></li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

<ol class='A'>
  <li>Custom style using <code>::before</code> pseudo-element</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

<ol class='B'>
  <li>Custom style using <code>::marker</code> pseudo-element</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

ol {  counter-reset: list;  list-style: none;}li {  counter-increment: list;  position: relative;}li:before {  content: counter(list);  margin-right: 5px;  position: absolute;  right: 100%;}

<ol>  <li>one</li>  <li>two</li>  <li>three</li></ol>

h3 + ol > li:only-child,
.no-style {
  display: block;
}

<h3>Some title</h3>
<ol>
  <li>One item</li>
  <li class="no-style">Second item that shouldn't get ordered and shouldn't increment the next item either</li>
  <li>Third item, ordered with number 2</li>
</ol>
<h3>Some other title</h3>
<ol>
  <li>Another list's first item</li>
  <li>Another list's second item</li>
  <li>Another list's third item</li>
</ol>
<h3>And yet another title</h3>
<ol>
  <li>A single item here that shouldn't get ordered</li>
</ol>

ul {  list-style-type: none;  display: table-cell;}
ul li {  color: #9e9e9e;  font-size: 18px;  font-weight: lighter;  list-style-position: inside;}
.wrap {  display: table;  margin: 20px 0;  border: 1px solid black;  padding: 10px;}
.num {  display: table-cell;  font-size: 30px;  vertical-align: middle;}

<div class="wrap">  <div class="num">1</div>  <ul>    <li><b>Title 1</b></li>    <li>      <p class="subtitulos">Subtitle 1</p>    </li>    <li>Stuff 1</li>    <li>Stuff 2</li>    <li>Stuff 3</li>  </ul></div><div class="wrap">  <div class="num">2</div>  <ul>    <li><b>Title 2</b></li>    <li>      <p class="subtitulos">Subtitle 2</p>    </li>    <li>Stuff 1</li>    <li>Stuff 2</li>    <li>Stuff 3</li>  </ul></div>

<ol>
    <li>STUFF</li>
    <li>Stuff</li>
    <li>Stuff</li>
</ol>

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

li
{
    counter-increment: custom;
}

ol li:before
{
    content: counter(custom) " ";   
}

ol li:first-child {
    counter-reset: custom;
}