0

Basically I would like to know the best way to create a simple list in CSS that:

instead of bullets has a circle with a number inside of it, and the text next to it...

I know how to create circles in css3, but how do you replace the bullet that comes with ul, with the circle?

Should I not use lists at all to create this? I just need circles with numbers inside of it, and text next to each circle saying xyz...

ex:

circle(with 1 inside) xyz

circle(with 2 inside) zzz

circle (with 3 inside) aaa

Thanks for any help :).

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
Ryan Frank
  • 13
  • 3
  • 1
    Like this? http://stackoverflow.com/questions/5732836/html-css-numbered-list-with-numbers-inside-of-circles/5742176#5742176 – thirtydot Oct 03 '11 at 09:48

1 Answers1

3

@Ryan; yes you can do this with css counter-increment property like this:

ul {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
li:before {
    display: inline-block;
    content: "("counter(item) ") ";
    counter-increment: item;
    width: 2em;
    margin-left: -2em;
}

check the fiddle http://jsfiddle.net/sandeep/ndBZk/

EDIT: list with circle

css:

li:before {
    display:block;
    content: counter(item);
    counter-increment: item;
    width:20px;
    height:18px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background:red;
    text-align:center;
    position:absolute;
    top:2px;
    left:-30px;
    padding-top:2px;
}

http://jsfiddle.net/sandeep/XuHNF/3/

sandeep
  • 91,313
  • 23
  • 137
  • 155