title: <li> Steps with arrows
body: <p>I'm trying to make a HTML list with arrows between them (Something like: Step 1-2-3). </p>
  
  <p>Here's a <a href="http://store.picbg.net/pubpic/51/02/f379008a71a95102.png" rel="nofollow noreferrer">wireframe</a> of the result i'm trying to accomplish:
  <img src="https://i.stack.imgur.com/MjPKG.png" alt="enter image description here"></p>
  
  <p>I'm guessing that the icon and the content will be on a ul something like that: </p>
  
  <pre><code>&lt;ul class="stepsCont"&gt; 
    &lt;li&gt;
    &lt;img src="icon" /&gt; 
    &lt;p&gt;content&lt;/p&gt;
    &lt;/li&gt; 
  &lt;/ul&gt; 
  
  
  
  .stepsCont li {display: inline; padding: 0 30px;}
  </code></pre>
  
  <p>But how to add the arrows ?</p>