Впорядкований список (HTML) нижньої літери з правими дужками?

Типовий нижній алфавітний список для впорядкованого списку використовує крапку '.'. Чи є спосіб використовувати правильну дужку замість цього, як a) ... b) ..etc?

Ось акуратне рішення. (Чесно кажучи, я здивував себе цим.) CSS має щось, що називається лічильниками , де ви можете встановити, наприклад, автоматичні номери глав для кожного заголовка. Трохи модифікацій дають вам нижче; Вам доведеться самостійно розібратися із заповненням тощо.

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

<span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Працює у всіх сучасних браузерах та IE9 + (і, можливо, IE8, але може бути помилковим).

Оновлення: я додав дочірній селектор, щоб запобігти вкладенню списків у збір батьківського стилю. trejder також вважає хорошим моментом у коментарях те, що вирівнювання елементів списку також зіпсовано. Стаття на 456bereastreet має гарне рішення , яке включає в себе абсолютно позиціонування лічильника.

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

<span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Ось jsFiddle, що показує результат, включаючи вкладені списки.

спираючись на відповідь DisgruntledGoat, я розширив її для підтримки підсписків та стилів, як мені було потрібно. Поділіться цим тут на випадок, якщо це комусь допоможе.

https://jsfiddle.net/0a8992b9/ виводи:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

Додавання цього до CSS дало кілька цікавих результатів. Було близько, але сигари немає.

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

----- Відредаговано, щоб включити рішення від Iazel, у коментарі -----

Я вдосконалив ваше рішення:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

Фон і position: absoluteзробив трюк!

Це працює для мене в IE7, FF3.6, Opera 9.64 та Chrome 6.0.4:

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

це вбудовано, оскільки воно кодується для електронної пошти, але головне полягає в тому, що діапазон діє як блок вмісту і тягне батьків на негативну ліву територію, тому він вирівнюється з номерами списків. два поля полягають у компенсації відмінностей IE7 та FF

сподіваюся, це допоможе.