HTML + CSS: Numbered list with numbers inside of c

Question

I'm trying to create an ordered list in CSS + HTML that looks like this:

I can't for the life of me figure out how to do this. I've tried using list-image but then the numerals don't appear. I tried setting a background, but it won't appear behind the number if list-style-position is set to outside. I tried setting it with a background and list-style-position: inside, then putting the text inside the li in a div to align it, but no combination of floats, margins, etc worked without wrapping around the numeral.

This seems like something I've seen on plenty of web sites, but at the moment I can't seem to find a working example, nor is Googling for this giving me any results.

So, can anyone help me with this? How would you create the above using HTML+CSS, ideally without using JS, and definitely without using just images. This text needs to be selectable and copy/pasteable.

Because a commenter asked, here's the markup I have right now:

<ol>
  <li><span>List item one.</span></li>
  <li><span>List item two.</span></li>
  <li><span>List item three.</span></li>
</ol>

None of the CSS I've tried has even come close to working, so I'm not sure the value of sharing what I have currently. Here's one version that failed...

ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); }
ol li { width: 176px; margin-right: 20px; float: left; }
ol li span { display: block; }

Answer 1

I find that browsers position list-style-image at various places and one has only the "outside" & "inside" position control.

I recommend the following:

http://jsfiddle.net/vEZHU/

NOTE: You can also use float to lay them out or what I did. Also, this asumes you know of sprites.

Hope this makes sense.

Answer 2

I would use flexbox and add 'divs' to the 'li' containing the number.

    <div class="container">
<ul class="info-list">
  <li><div>1.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>2.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>3.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
<ul class="info-list">
  <li><div>4.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>5.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>6.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
</div>

CSS:

.container {
  display: flex;
}
.info-list li {
  list-style: none;
  display: flex;
}
.info-list li > div {
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 10px;
}

On codepen: https://codepen.io/mkempinsky/pen/OBNXGO