Ordered list with ":before" element text wrap issue

Question

I'm trying to use the li:before element to number my ordered lists. I've been searching for a while now and cant seem to find an answer-

Is there a way to keep the list text from wrapping under the before element?

https://jsfiddle.net/ngem6u20/

HTML:

<div style="width: 250px;">
   <ol class="red-circle">
      <li>Item number one</li>
      <li>Item number Two</li>
      <li>Item number threeItem number threeItem number</li>
   </ol>
</div>

CSS:

ol.red-circle {
   margin-left: 0;
   padding-right: 0;
   list-style-type: none;
}

ol.red-circle li {
   counter-increment: step-counter;
   margin-bottom: 20px;
}

ol.red-circle li:before {
   color:#fff;
   content: counter(step-counter);
   background: #ff6766;
   padding: .3em .6em;
   font-size: 500 14/24;
   border-radius: 50%;
   margin-right: 20px;
}

Answer 1

One option would be to absolutely position the pseudo-element relative to the parent li element and then use padding-left to displace the absolutely positioned pseudo-element.

Updated Example

ol.red-circle {
  list-style-type: none;
}
ol.red-circle li {
  counter-increment: step-counter;
  margin-bottom: 20px;
  position: relative;
  padding-left: 2em;
}
ol.red-circle li:before {
  color: #fff;
  content: counter(step-counter);
  background: #ff6766;
  padding: .3em .6em;
  font-size: 500 14/24;
  border-radius: 50%;
  margin-right: 20px;
  position: absolute;
  left: 0;
}

<div style="width: 250px;">
  <ol class="red-circle">
    <li>Item number one</li>
    <li>Item number Two</li>
    <li>Item number threeItem number threeItem number</li>
  </ol>
</div>

Alternatively, you could also use a negative text-indent value to displace the pseudo-element:

Updated Example

ol.red-circle li {
    counter-increment: step-counter;
    margin-bottom: 20px;
    text-indent: -3em;
}