21

I have to show like

(a)

(b)

(c)

Update:

I found a CSS way

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

but it not works in IE 7 and lower.

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 4
    Those are parentheses, not brackets. ;) – Jimmy Apr 01 '10 at 05:55
  • Good that you figured it out. Changing the question after the fact is not nice though. This will give IE some more capabilities, but it doesn't include `counter`: http://code.google.com/p/ie7-js/ I think you're mostly out of luck. – deceze Apr 01 '10 at 06:26
  • i was also looking on IE7.js but it's not showing support :( for `counters` http://ie7-js.googlecode.com/svn/test/index.html – Jitendra Vyas Apr 01 '10 at 06:31
  • 1
    @Jimmy - what? "Parentheses" and "brackets" are two words that mean precisely the same thing. – Hammerite Aug 25 '10 at 00:21
  • @Hammerite - Not "precisely the same thing," but upon further investigation, the two might be used interchangeably in the UK: http://en.wikipedia.org/wiki/Bracket – Jimmy Aug 28 '10 at 09:36
  • [Here](http://stackoverflow.com/a/1636635/1469208) you have a very neat solution, that uses CSS counters. – trejder Jan 30 '14 at 14:20

9 Answers9

9

This is possible with custom counters, but at least IE7- doesn't support it, some others mightn't either. See here for details: http://www.quirksmode.org/css/counter.html

Ex:

li:before {
    content: "(" counter(mycounter,lower-latin) ")";
}
deceze
  • 510,633
  • 85
  • 743
  • 889
6

I use this code snippet in mediawiki with CSS enabled. I am not sure whether this will work in older versions of IE...

<style>
    /* css handles the parentheses/brackets */
    .laparent ol { counter-reset: item }
    .laparent li { display: block ; counter-increment: item; }
    /* replace the counter before list item with
              open parenthesis + counter + close parenthesis */
    .laparent li:before { content: " (" counter(item,lower-alpha) ") "; }
</style>
<ol class="laparent">
    <li> this is the first item; </li>
    <li> this is the second item; or </li>
    <li> this is the third item. </li>
</ol>

Outputs:

(a) this is the first item;
(b) this is the second item; or
(c) this is the third item.
rigel
  • 485
  • 1
  • 6
  • 12
Allan
  • 61
  • 1
  • 2
  • You should format your answer and describe what you're doing. It may seem straight forward to you but you could afford a few explaining words – ted Apr 20 '17 at 14:38
  • this puts (a) to the start of the block, not next to it as marker is – Fanky Apr 01 '22 at 14:45
2

Since CSS3 the problem seems solved: 

style="list-style-type: parenthesized-lower-latin;"

http://www.w3.org/TR/2011/WD-css3-lists-20110524/

Olivier
  • 49
  • 6
1

Or you can simply add the text count manually without having yo worry about browser fallbacks. Works in any browser!

ul.abc-list {
  list-style: none;
  padding-left: 30px;
}
ul.abc-list > li > span.counter {
  position: absolute;
  margin-left: -20px;
  /*if you want to right align the text
   * 
   * width: 15px;
   * text-align: right;
   */
}
<ul class="abc-list">
  <li><span class="counter">a)</span> One</li>
  <li><span class="counter">b)</span> Two</li>
  <li><span class="counter">c)</span> Three</li>
  <li><span class="counter">d)</span> Four</li>
  <li><span class="counter">e)</span> Five</li>
  <ul>
Lasithds
  • 2,161
  • 25
  • 39
0

I instead made paragraphs. I indented the paragraph and then pulled out the first line, using a text-indent and numbered these myself.

.list_indent {
margin-left:48px;
}
.list_indent p {
text-indent:-26px;
}

<div class="list_indent">  
<p> (1)&nbsp;&nbsp;The recruitment report and a copy of the blah and blah and blah and blah and blah and blah and blah and blah.;
</p>   
<p> (2)&nbsp;&nbsp;A copy of the blah and blah and blah and blah and blah and blah and blah and blah.
</p>     
<p> (3)&nbsp;&nbsp;Recruitment.
</p>   
</div>
daniel kessler
  • 9
  • 1
0

You can't get (a) (b) (c).

You can however get the letter without the brackets:

<ul style="list-style-type: lower-latin;">...</ul>

See http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all

Amy B
  • 17,874
  • 12
  • 64
  • 83
0

These are your options according to W3C.

With CSS it isn't possible. You would have to make a custom list using javascript (or similar).

jay
  • 10,275
  • 5
  • 34
  • 52
0

There's no built-in way to do this. Which means you enter the land of (fun) hacks.

You could try a background image of two parentheses.

roufamatic
  • 18,187
  • 7
  • 57
  • 86
0

If your list is fixed, a workaround can be :

<ul>
  <li style="list-style:symbol('(a)');">...</li>
</ul>
<ul>
  <li style="list-style:symbol('(b)');">...</li>
</ul>
<ul>
  <li style="list-style:symbol('(c)');">...</li>
</ul>
...

which gives

  (a) ...
  (b) ...
  (c) ...
   ...

Hope this helps.

Najib
  • 1