CSS ball position

I have a title <h2> with <small> and I would like to add a colored ball in front of my title.

<span ng-class="{'greenBall' : order.state == 'Created'}">
<h2> Finalize <small>Some text</small> </h2>

Here is my css to create the "ball"

.greenBall{
  display: block;
  width: 1em;
  height: 1em;
  background-color: rgba(90, 189, 90, 1);
  border-radius: 50%;}

The probleme is that the ball is above the title and not in front. I tried to use display:inline but the "ball" need to be in block.

Any idea ?

Solution

Might not be what you're looking for, but in this instance you could just use the :before selector.

h2:before {
  content:'';
  display:inline-block;
  width: 1em;
  height: 1em;
  background-color: rgba(90, 189, 90, 1);
  border-radius: 50%;
}

<h2> Finalize <small>Some text</small> </h2>

I believe the size of the "ball" is based on the size of the font and the text within the content rule. Note that the color is the same as the background-color, there is actually text in that bubble.