<li> Steps with arrows

Question

I'm trying to make a HTML list with arrows between them (Something like: Step 1-2-3).

Here's a wireframe of the result i'm trying to accomplish:

I'm guessing that the icon and the content will be on a ul something like that:

<ul class="stepsCont"> 
  <li>
  <img src="icon" /> 
  <p>content</p>
  </li> 
</ul> 



.stepsCont li {display: inline; padding: 0 30px;}

But how to add the arrows ?

Answer 1

you may insert the arrow as content image of a :before pseudoelement, starting from the second <li>, e.g.

li + li:before {
   content: url(arrow.png);
   display: inline-block;
   vertical-align: middle;
   margin: 0 30px;
}

or you could also add the arrow as a background

li + li  {
   background: url(arrow.png) center left no-repeat;
   padding-left: 50px;
}

Codepen Example: http://codepen.io/anon/pen/mjCnA

(Both the solution work even on IE8).

Answer 2

You can use after or before pseudonymes:

 .stepsCont li:after {
      content: ">";
      }

 .stepsCont li:last-child:after {
      display: none;
 }

Additional you can set here an Background image instead of >

Answer 3

You can do something like this using :after:

JSFiddle

.stepsCont li {display: inline; padding: 0 30px;} 

/*Added code*/

li:after{
    content:" >";
}

li:last-of-type:after{
    content:"";
}

Then just style the :after.