title: How to prepend a number before an HTML H2 with CSS?
body: <p>I am trying to create a nice looking <code>H2</code> heading in HTML and CSS that will allow me to have a nice formatted Number before the actual Heading text, as shown in the following image:</p>
  
  <p><img src="https://i.stack.imgur.com/pjIiD.png" alt="enter image description here"></p>
  
  <p>The example in the image is using a CSS code like this below and it works great, except that I cannot set the number value in the orange circle in the HTML!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2:before {
    content: "2";
    text-align: center;
    position: relative;
    display: inline-block;
    margin-right: 0.6em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    width: 1.6em;
    height: 1.6em;
    font-weight: 900;
    line-height: 1.6;
    color: #FFF;
    font-size: 1em;
    background: #F77621;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;How to Get Detailed PPC Keyword Data&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My other attempt is to Wrap the <code>h2</code> and a <code>span</code> both inside a <code>div</code>.  The span is holding the number circle:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.number-circles {
    margin-bottom: 0.4em;
  }
  .number-circles h2 {
    display: inline-block;
    font-size: 1.5em;
    text-transform: capitalize;
    line-height: 1.75em;
    color: #555;
  }
  .number-circles span.num {
    position: relative;
    display: inline-block;
    margin-right: 0.6em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    width: 1.6em;
    height: 1.6em;
    font-weight: 900;
    line-height: 1.6;
    text-align: center;
    color: #FFF;
    font-size: 1em;
    background: #F77621;
  }
  /* added to show the issue */
  .number-circles {
    max-width: 15em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="number-circles"&gt;
    &lt;span class="num"&gt;2&lt;/span&gt;
    &lt;h2&gt;How to Get Detailed PPC Keyword Data&lt;/h2&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With this approach, I can set the value for the Number in the HTML.  The problem I have is when the <code>h2</code> text is too wide for a single line, then it makes the whole thing go to a new line and does not remain on the line with the circle number span.  This is bad! See image:</p>
  
  <p><img src="https://i.stack.imgur.com/2fRll.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>Can someone help me with a good solution that behave like the first one, where a wide h2 text will stay next to my number span?</p>