How to prepend a number before an HTML H2 with CSS?

Question

I am trying to create a nice looking H2 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:

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!

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;
}

<h2>How to Get Detailed PPC Keyword Data</h2>

My other attempt is to Wrap the h2 and a span both inside a div. The span is holding the number circle:

.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;
}

<div class="number-circles">
  <span class="num">2</span>
  <h2>How to Get Detailed PPC Keyword Data</h2>
</div>

With this approach, I can set the value for the Number in the HTML. The problem I have is when the h2 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:

---

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?

Answer 1

Put the span inside the h2 and you can edit it however you want using jQuery or pure JS.

jsFiddle

HTML: <h2><span class="number">2</span>How to Get Detailed PPC Keyword Data</h2>

CSS:

h2 span.number {
    color:white;
    background:orange;
    border-radius:50%;
    padding:4px 12px;
    margin-right: 10px;
    /* or whatever you want to do with your badge */
}

In case you are wondering: this is 100% valid, span is an inline element and can be put anywhere you want and it won't disturb your regular text flow.

Answer 2

... it works great, except that I cannot set the number value in the orange circle in the HTML!

You can use CSS pseudo elements and HTML5 data attributes:

h2:before {
  content: attr(data-number);
  display: inline-block;
  /* customize below */
  font-size: 1em;
  margin-right: 0.6em;
  width: 1.6em;
  line-height: 1.6em;
  text-align: center;
  border-radius: 50%;
  color: #FFF;
  background: #F77621;
}

<h2 data-number="2">Heading</h2>

It is also possible to wrap the number inside a span and place it inside the heading. This makes the number visible to search engines. The CSS will remain the same except that you do not need the content property.

---

Just remembered that you can use CSS2 counters if you simply want to number your headings:

.use-counter {
  counter-reset: foo 0;
}
.count-this:before {
  counter-increment: foo 1;
  content: counter(foo) ".";
  display: inline-block;
  /* customize below */
  font-size: 1em;
  margin-right: 0.6em;
  width: 1.6em;
  line-height: 1.6em;
  text-align: center;
  border-radius: 50%;
  color: #FFF;
  background: #F77621;
}

<section class="use-counter">
  <h1>Lorem ipsum dolor sit amet</h1>
  <h2 class="count-this">Fusce sed nunc eget sem euismod</h2>
  <h2 class="count-this">In vel libero in nibh finibus finibus</h2>
  <h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2>
</section>
<section class="use-counter">
  <h1>Aenean ac urna id sapien</h1>
  <h2 class="count-this">Nulla molestie nunc non ultrices</h2>
  <h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2>
  <h2 class="count-this">Curabitur eget sapien tempor arcu</h2>
</section>