UL List items with styled decimal numbers

Question

I need to create a set of list items where I need to style the list item numbers (decimals) with a border-radius and a background color.

Here is the snapshot of how I want my list items to look like.

The Image is what I am looking for.

I have tried to put a border radius, background on the li, but I was not able to get the output that I am lookin for.

Here is a WORKING LINK of what I have tried so far. I removed the border-radius, background, etc. as it was not displaying properly.

The HTML:

<ul>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
</ul>

The CSS:

li{list-style-type:decimal;}

I would like solutions for the above provided the below..

It should not be a sprite/background image solution
I am only looking for a solution where I have to use a border-radius and background-color on the list items, which I tried, but could not work the way I want in my reference Image.

Awaiting Solutions.

I am not looking for a background image/sprite solution. I am only looking for a solution where I have to use a border-radius and background-color on the list items, which I tried, but could not work the way I want in my reference Image. - @furrie — Nitesh, Sep 05 '13 at 12:18
`border-radius` alone makes it very difficult to solve the problem because to achieve a _circle_ with border radius, it implies that the element needs `0` width/height, I think... That would make the content (ie the decimal inside) unreadable, I believe. — Joum, Sep 05 '13 at 12:19
From a Markup Point: Why don't you use ordered lists then (
) ? — worenga, Sep 05 '13 at 12:19
I have no problems switching to `
` provided i get a solution with border-radius and background-color. If you have a solution with `
`, please go ahead - @mightyuhu — Nitesh, Sep 05 '13 at 12:21
I answered an almost identical question a couple of years ago. See dup link above. I think I gave a fairly good solution there. — Spudley, Sep 05 '13 at 12:26
@Spudley - I saw your post, but my requirement was specific to get solution by using only border-radius and background-color. The solution that you had provided was a generic one with different options to achive the output. I am satisfied with JonasGrumann solution, as it exactly understands the question and has provided answer within the constraints stated. Anyways, thank you for your mention. :) — Nitesh, Sep 05 '13 at 12:48
@Spudley - Also in your post, the OP has made changes to the HTML, where as in my case, I can only change the `
` to `
` and nothing more in the markup like adding ``, etc. — Nitesh, Sep 05 '13 at 12:50
@NathanLee - the span in the other question is his effort to get the items lined up horizontally, so it's not relevant to your question. It's not necessary for him anyway; my answer doesn't require it. Of the option I gave in my answer, the one I favoured was basically the same solution as the answer you've accepted here, although it is true that Jonas has given you the complete code, where I previously just gave the key points and left it to him to work out the rest. In any case, I'm glad you've got the solution you wanted. — Spudley, Sep 05 '13 at 13:05

Jonas Grumann · Accepted Answer · 2015-10-20T08:03:19.357

8

Here's a little trick:

ol {
        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;
        background: blue;
        color: white;
        display: inline-block;
        border-radius: 50%;
        margin: 0 5px ;
        padding: 0 5px;
    
    }

<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ol>

edited Oct 20 '15 at 08:03

answered Sep 05 '13 at 12:21

Jonas Grumann

10,438
2
22
40

I got squares on a Webkit browser... :S – Joum Sep 05 '13 at 12:25
Chrome? I'm using chrome and it looks fine. Or are you on safari? edit: tested on safari, works fine for me. – Jonas Grumann Sep 05 '13 at 12:26
Neither... `QtWeb` to be more precise: http://qtweb.net/ – Joum Sep 05 '13 at 12:27
Supposedly it's _Safari-ish_... – Joum Sep 05 '13 at 12:28
I prefixed `-webkit-` and used fixed pixel size and it worked... It's my browser's problem, probably... Good job! +1 – Joum Sep 05 '13 at 12:32
2

Also, don't mean to bad-mouth, but if the _length_ of the bullet numbers becomes too big, this shapes like a _pill_... :) – Joum Sep 05 '13 at 12:34
2

You are right Joum, but what if the list gets really long? you want a huge circle with 4 numbers in it or yould you prefer a pill? honetly, I'd prefer a pill – Jonas Grumann Sep 05 '13 at 12:38
Just one quick question - @JonasGrumann. I tired to increase the padding of the cirle to give more space to the numbers inside, but somehow, they squashed. Here is a look of the actual scenario with in your linked solution. http://jsfiddle.net/DdFKN/1/ How to prevent this at the same time enlarging the cirle with symmetry if need be? – Nitesh Sep 05 '13 at 12:40
@JonasGrumann - Can you see the issue stated above?? How to resolve it?? – Nitesh Sep 05 '13 at 12:48
You need to change the padding for top, bottom, right and left. http://jsfiddle.net/jonigiuro/DdFKN/2/ or you could set a fixed width and height, and then play around with line-height and set text-align: center. – Jonas Grumann Sep 05 '13 at 13:12
I did, but it squashes or becomes a capsule. - @JonasGrumann – Nitesh Sep 05 '13 at 13:31
@JonasGrumann definitely a pill... Although, I have to say that although it isn't the OP's wish, I would go for the background image option... less hassle in terms of cross-browser compliance and legacy browser support, I think... – Joum Sep 06 '13 at 11:49
I would too, but this guy here asked a css solution. You're right though, it's not the best solution if you want the exact result in every browser – Jonas Grumann Sep 06 '13 at 12:24
1

Um... this JSFiddle link is getting hijacked somehow, taking you to a Spanish iPhone 5c ad. – Kaceykaso Aug 12 '14 at 16:49

UL List items with styled decimal numbers

1 Answers1

Linked