Correct link break for mobile with font awesome (HTML, CSS)

Question

I have an ordered list with a font awesome icon. I want to let it break correctly.

My code:

https://codepen.io/altos/pen/BragXj

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ol>
  <li><a href="#" target="_blank">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 3 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 4 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
</ol>

My goal:

Answer 1

I would add padding to the li and then absolutely position the number and arrows using before and after on the li:

ol {
  padding-left: 0;
  counter-reset: item;
  list-style-type: none;
}

ol li {
  position: relative;
  padding-left: 3em;
  line-height: 20px;
  /* match font size of font awesome icon */
}

ol li:before {
  content: counter(item, decimal-leading-zero) " ";
  counter-increment: item;
  display: inline-block;
  position: absolute;
  left: 0;
}

ol li:after {
  color: #E3000B;
  padding-right: 8px;
  font-size: 20px;
  font-family: FontAwesome;
  content: "";
  display: inline-block;
  position: absolute;
  left: 1.2em;
  top: -0.1em;
  /* seems to vertically align icon to number better */
}

a {
  text-decoration: none;
  display: inline-block;
  position: relative;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ol>
  <li><a href="#" target="_blank">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 3 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 4 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
</ol>