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
).