Uporządkowana lista (HTML) mała litera z prawymi nawiasami?

Domyślny typ listy z małą alfabetem dla listy uporządkowanej używa kropki „.”. Czy jest sposób na użycie prawego nawiasu zamiast a) ... b) ..etc?

Oto zgrabne rozwiązanie. (Szczerze mówiąc, sam siebie tym zaskoczyłem.) CSS ma coś, co nazywa się licznikami , gdzie możesz na przykład ustawić automatyczne numery rozdziałów w każdym nagłówku. Trochę modyfikacji daje poniższe; Musisz samodzielnie uporządkować wypełnienie itp.

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>

Działa we wszystkich nowoczesnych przeglądarkach i IE9 + (i prawdopodobnie IE8, ale może zawierać błędy).

Aktualizacja: dodałem selektor potomny, aby zapobiec pobieraniu przez zagnieżdżone listy stylu rodzica. Trejder również podkreśla w komentarzach, że wyrównanie elementów listy również jest pomieszane. Artykuł na 456bereastreet ma dobre rozwiązanie, które polega na całkowicie ustawienie licznika.

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>

Oto jsFiddle pokazujący wynik, w tym listy zagnieżdżone.

opierając się na odpowiedzi DisgruntledGoat, rozszerzyłem ją, aby obsługiwać podlistę i style, zgodnie z potrzebami. Udostępnianie go tutaj na wypadek, gdyby to komuś pomogło.

https://jsfiddle.net/0a8992b9/ wyjścia:

(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

Dodanie tego do CSS dało interesujące rezultaty. Było blisko, ale nie było cygara.

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

----- Edytowano, aby uwzględnić rozwiązanie z Iazel, w komentarzach -----

Udoskonaliłem Twoje rozwiązanie:

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

Tło i position: absolutezałatwił sprawę!

To działa dla mnie w IE7, FF3.6, Opera 9.64 i 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>

jest to wbudowane, ponieważ jest zakodowane dla wiadomości e-mail, ale głównym punktem jest to, że zakres działa jak blok treści i wciąga paren na ujemne lewe terytorium, tak aby był zgodny z numerami listy. oba marginesy mają kompensować różnice IE7 i FF

mam nadzieję że to pomoże.