title: HTML + CSS: Numbered list with numbers inside of circles
body: <p>I'm trying to create an ordered list in CSS + HTML that looks like this:
  <img src="https://i.stack.imgur.com/MI1Kh.png" alt="CSS List Example"></p>
  
  <p>I can't for the life of me figure out how to do this. I've tried using <code>list-image</code> but then the numerals don't appear. I tried setting a background, but it won't appear behind the number if <code>list-style-position</code> is set to <code>outside</code>. I tried setting it with a background and <code>list-style-position: inside</code>, then putting the text inside the <code>li</code> in a <code>div</code> to align it, but no combination of floats, margins, etc worked without wrapping around the numeral.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Because a commenter asked, here's the markup I have right now:</p>
  
  <pre><code>&lt;ol&gt;
    &lt;li&gt;&lt;span&gt;List item one.&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;List item two.&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;List item three.&lt;/span&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>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...</p>
  
  <pre><code>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; }
  </code></pre>