Border on <li></li> items including image styled bullets

Question

How can i put a border on a <li> item including the styled bullets.

li{
   border:solid 1px gray;
}

CSS rule above will only give a border to the text contents of <li></li> and the border is not extended to the bullets which I have styled as png icons.

How can i get the bottom border on each li to extend to the list bullets as in the second screenshot?

Current Output

Desired Output

Answer 1

Like so:

ul {
    list-style-position: inside;
}

Your bullet is by default outside the <li> element.

Answer 2

Add list-style-position : inside to the ul. Here... https://jsfiddle.net/dzrcL79o/

Answer 3

Add

ul {
    border: 1px dashed gray;
    font-family: Arial, Tahoma, Verdana;
    list-style-position: inside;
}

li {
    border-bottom: 1px solid gray;
}