Numbered lists via HTML and CSS and/or Javascript

Question

I need to achieve something like this...

Numbered List

I'm guessing the pictures need to be stored in some form of array in Javascript containing the image links. But I'm not sure if it is achievable in just HTML and CSS.

There is a solution on this question, which uses the ":before" pseudo element, but is there a more cross-browser friendly solution available?

Try this answer: http://stackoverflow.com/questions/6481581/add-background-image-to-ol-numbers — Tdelang, Jul 19 '13 at 13:09

score 0 · Accepted Answer · answered Jul 19 '13 at 13:05

0

You could use regular <ol> and add a background-image (red circle) to each of the list items

answered Jul 19 '13 at 13:05

Anton Matyulkov

722
1
7
15

score 0 · Answer 2 · answered Jul 19 '13 at 13:21

Why even use an image:

 <style type="text/css">
   body {
    background:#333; 
    color:#FFF;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
   }
   .number-list {
      list-style-type:none;
      margin:0px;
      padding:0px;
   }
   .number-list li {
 width:100%;
 float:left;
 margin-bottom:10px;
 line-height:35px;
 font-size:16px;
   }
   .number-list li .order-number {
      background:#900;
      color:#FFF;
      width:35px;
      height:35px;
      text-align:center;
      line-height:35px; 
      float:left;
      margin-right:15px;
      -webkit-border-radius:35px;
         -moz-border-radius:35px;
          -ms-border-radius:35px;
      -border-radius:35px;
        border-radius:35px;
   }
  </style>
  </head>

  <body>

  <ol class="number-list">
      <li>
          <span class="order-number">1</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">2</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">3</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">4</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
  </ol>

People in IE 8 < can have a square rather than a circle ... seems fitting

It's an ordered list, if anything it orders an ordered list. — JohnnyFaldo, Jul 19 '13 at 13:47

Numbered lists via HTML and CSS and/or Javascript

2 Answers2