Style an Ordered List with Cyrillic Letters

How can I get the `ol` element to show in a foreign alphabet?

Here is the css solution:

body {

    font-family: Arial, sans-serif;

}

.welsch {

    list-style: none;

}

.welsch li:before {

    display: inline-block;

    position: absolute;

    left: 20px;

    width: 20px;

    text-align: right;

}

.welsch li:nth-child(29n+1):before {

    content:"a.";

}

.welsch li:nth-child(29n+2):before {

    content:"b.";

}

.welsch li:nth-child(29n+3):before {

    content:"c.";

}

.welsch li:nth-child(29n+4):before {

    content:"ch.";

}

.welsch li:nth-child(29n+5):before {

    content:"d.";

}

.welsch li:nth-child(29n+6):before {

    content:"dd.";

}

.welsch li:nth-child(29n+7):before {

    content:"e.";

}

.welsch li:nth-child(29n+8):before {

    content:"f.";

}

.welsch li:nth-child(29n+9):before {

    content:"ff.";

}

.welsch li:nth-child(29n+10):before {

    content:"g.";

}

.welsch li:nth-child(29n+11):before {

    content:"ng.";

}

.welsch li:nth-child(29n+12):before {

    content:"h.";

}

.welsch li:nth-child(29n+13):before {

    content:"i.";

}

.welsch li:nth-child(29n+14):before {

    content:"j.";

}

.welsch li:nth-child(29n+15):before {

    content:"l.";

}

.welsch li:nth-child(29n+16):before {

    content:"ll.";

}

.welsch li:nth-child(29n+17):before {

    content:"m.";

}

.welsch li:nth-child(29n+18):before {

    content:"n.";

}

.welsch li:nth-child(29n+19):before {

    content:"o.";

}

.welsch li:nth-child(29n+20):before {

    content:"p.";

}

.welsch li:nth-child(29n+21):before {

    content:"ph.";

}

.welsch li:nth-child(29n+22):before {

    content:"r.";

}

.welsch li:nth-child(29n+23):before {

    content:"rh.";

}

.welsch li:nth-child(29n+24):before {

    content:"s.";

}

.welsch li:nth-child(29n+25):before {

    content:"t.";

}

.welsch li:nth-child(29n+26):before {

    content:"th.";

}

.welsch li:nth-child(29n+27):before {

    content:"u.";

}

.welsch li:nth-child(29n+28):before {

    content:"w.";

}

.welsch li:nth-child(29n+29):before {

    content:"y.";

}

<ol class="welsch">

 <li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li>

</ol>

HTML Custom List Ordering (alphabetic list with non-english characters)

Normally, lists don't work like that. With a list-style-type of lower-latin, only the lowercase latin letters will be displayed. After "z", it continues with "aa" and so on.

However, it's perfectly possible to do what you want with a bit of customised CSS.

li[value] {list-style-type:none; position:relative}

li[value]::before {content:attr(value) '. ';

position:absolute; right:calc(100% + .33em);}

<ol type="a">

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li value="ç">Item 4</li>

    <li>Item 5</li>

</ol>

How to add a character to decorate the numbers of an ordered list in HTML

Solution if you want asterick next to number, and also for double digits

ul {

  background-color: red;

}

li {

  position: relative;

}

li.hard:before {

  content: "*";

  position: absolute;

  left: -25px;

}

li.hard:nth-of-type(n+10):before {

  left: -33px;

}

<ol>

  <li> Easy Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li> Easy Exercise </li>

  <li> Easy Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li> Easy Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li class="hard"> Hard Exercise </li>

  <li> Easy Exercise </li>

</ol>

How to create an ordered list starting by 01

Myolwas not at the right place , just moved it a little bit above :)

 .container
  .row
    .col-xs-12.col-sm-12
      h1.text-gray Tutorials
      br
    .col-xs-10.col-sm-5.index-background
      ol.h4.text-white
        - @tutos.each do |tuto|
         li
           h4.text-white = link_to tuto.title, tuto_path(tuto)

list-style-type: lower-alpha without k, w and y

IMHO you have two options use a definition list where you can define your own prefix or like I would recommend add an empty <li /> tag which has the style display:none.

Here is a example for the definition list:

<dl>
  <dt>a)</dt>
  <dd>some text</dd>
</dl>

Striking through a number in an ordered list CSS/HTML

easy as pie: list-style-position: inside;

http://jsfiddle.net/seler/NWbrR/

edit: it looks like it's browser dependent behaviour. in mozilla it renders ok.

edit2:
for full browser compability u can use this js script: http://jsfiddle.net/seler/32ECB/

CSS Styled Editable List?

With just HTML and CSS you can mix integers and letters, but you can't use arbitrary symbols like ! and #.

Use list-style-type in your CSS counter to change from integers to letters to whatever (e.g. li:before {content:counter(counter, upper-alpha)}), and counter-reset with starting values (e.g. li {counter-reset: counter 0}) to keep from ordering like 1 2 3 4 5 6 7 8 9 10 K L M N…

Here's a minimal working snippet showing the styling you'll need:

ol {

  margin: 0;

  padding: 0;

  list-style: none;

  counter-reset: count

}

li {

  counter-increment: count

}

li:before {

  content: counter(count)

}

ol li:nth-child(10) {

  counter-reset: count -1

}

ol li:nth-child(n+11):before {

  content: counter(count, upper-alpha)

}

ol li:nth-child(13) {

  counter-reset: count 0

}

ol li:nth-child(n+13):before {

  content: counter(count, lower-greek)

}

<ol>

  <li>Decimal starts here</li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li>This is zero</li>

  <li>Uppercase Latin starts here</li>

  <li></li>

  <li>Lowercase Greek starts here</li>

  <li></li>

  <li></li>

  <li></li>

</ol>

HTML/CSS nested ordered list

Update your css to following

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

For reference - http://jsfiddle.net/f3adtsmb/