How to Prefix Ordered List Item Numbers with a Static String Using CSS

How can I prefix ordered list item numbers with a static string using CSS?

The only pure CSS way is with counters:

ol {
    counter-reset: item;
    list-style-type: none;
}

ol li:before {
    content: 'Q' counter(item, decimal) '. ';
    counter-increment: item;
}

You cannot achieve this besides using CSS counters (which were designed specifically for such use cases!) or JavaScript.

By the way, it's decimal, not numbered.

How to prefix hierarchical ordered list item numbers with a static string

I removed unnecessary codes and changed h1s to h2s.

Your counter counts only li elements. You need to count h2s with the same counter too.

Read about how CSS counter-resets create new scopes.

body {  counter-reset: item;}h2:before {  counter-increment: item;  content: counter(item) ". ";}ol {  list-style-type: none;  counter-reset: item;}li:before {  counter-increment: item;  content: counters(item, ".") ". ";}

<section>  <h2>First section</h1>    <ol>      <li>Some text here, and some fruits:        <ol>          <li>Apples</li>          <li>Oranges</li>        </ol>      </li>      <li>Some more text here.</li>    </ol></section>
<section>  <h2>Second section</h1>    <ol>      <li>Some second text here, and some fruits:        <ol>          <li>Bannanas</li>          <li>Mangos</li>        </ol>      </li>      <li>Some more second text here.</li>    </ol></section>

How to prefix a word in a list number

You can use ::before (:before for IE8) and counter-reset/increment

ol {  counter-reset: number;}li {  list-style: none;  counter-increment: number;}li::before {  content: "Step " counter(number) ".";  position: relative;  left:-5px}

<ol>  <li>Some text here</li>  <li>Some more text here..</li>  <li>Oh yeah, here's some pretty text</li></ol>

Replace ordered list number with prefixed value using CSS and HTML

just just have to switch off the default numeration (and reapply a custom numeration like you already do):

ol {
   counter-reset: item;
   list-style-type: none;
}

take a look at this example.

how to create multiple html ordered lists with different headers (edited)

Give this a try

ol.step {  margin-left: 0;  counter-reset: list 0;}
ol.step > li {  list-style: none;}
ol.step > li:before {  counter-increment: list;  content: "Step " counter(list) ": ";  float: left;  width: 3.5em;}
ol.equipment {  margin-left: 0;  counter-reset: equipment 0;}
ol.equipment > li {  list-style: none;}
ol.equipment > li:before {  counter-increment: equipment;  content: "Equipment " counter(equipment) ": ";  float: left;  width: 6em;}

<h2>List 1</h2><ol class="equipment">  <li>Driver's license.</li>  <li>Credit card.</li>  <li>Laptop.</li></ol><h2>List 2</h2><ol class="step">  <li>I would like to create an ordered list like the one below. I appreciate your help.</li>  <li>Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>  <li>Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>  <li>Ask someone to stand behind your car to check the lights.</li></ol>

Nested Orderd List with combination of numbers, alphatets and roman numerals for numbering?

<ol type="1|a|A|i|I">

1   Default. Decimal numbers (1, 2, 3, 4)
a   Alphabetically ordered list, lowercase (a, b, c, d)
A   Alphabetically ordered list, uppercase (A, B, C, D)
i   Roman numbers, lowercase (i, ii, iii, iv)
I   Roman numbers, uppercase (I, II, III, IV)

http://www.w3schools.com/tags/att_ol_type.asp

Insert CSS parent section counter for nested lists

You might use two separate counters -- one for sections and one for items:

ul {  counter-reset: section;}
ul ul {  counter-reset: item;  counter-increment: section;}
li {  counter-increment: item;}
.ruleNumber::after {  content: counters(item, ".");}
a::after {  content: counters(section, ".");}

<ul>  <li>    <span class="ruleNumber">Rule </span>    <ul>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>    </ul>    <a href="#" onclick="">Add To Rule </a>  </li>  <li>    <span class="ruleNumber">Rule </span>    <ul>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>    </ul>    <a href="#" onclick="">Add To Rule </a>  </li>  <li>    <span class="ruleNumber">Rule </span>    <ul>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>      <li>        <span class="ruleNumber">Rule </span>        <div class="rule">...</div>      </li>    </ul>    <a href="#" onclick="">Add To Rule </a>  </li></ul>

How to create an html list that give a result with the UL Level numbers as the list value

You does not need counter here as you are not increasing or decreasing your counter value on same level...use :before pseudo class for each level instead

Stack Snippet

ul {  list-style-type: none;  font: 13px Verdana;}
ul li:before {  content: "1. Link ";  color: red;}
ul li li:before {  content: "2. Link ";}
ul li li li:before {  content: "3. Link ";}

<ul>  <li>LIST ITEM</li>  <li>    <ul>      <li>LIST ITEM</li>      <li>        <ul>          <li>LIST ITEM</li>          <li>LIST ITEM</li>        </ul>      </li>      <li>LIST ITEM</li>    </ul>  </li>  <li>LIST ITEM</li>  <li>    <ul>      <li>LIST ITEM</li>      <li>LIST ITEM</li>      <li>LIST ITEM</li>      <li>LIST ITEM</li>    </ul>  </li>  <li>LIST ITEM</li></ul>