I have a navigation list I placed inside of a , I am attempting to get an image that appears on both sides of a link when you hover. Basically a an arrow on each side of the link.

I have managed to get the effect I am looking for with:

<ul>
          <li style=""> <a href="#">Services</a> </li>
          <li> <a href="#">About</a> </li>
          <li> <a href="#">Media</a> </li>
          <li> <a href="#">FAQ</a> </li>
          <li> <a href="#">Portfolio</a> </li>
          <li> <a href="#">Contact</a> </li>
        </ul>


.nav ul{
    list-style:none;
    text-align:center;

}


.nav li:hover a:before, .nav li:hover a:after {
    content:url(../images/nav_bullet.png);
}

The end result will look like the following but with the list centered:

link
>> Hovered Link <<
link

However I am not sure if that is the best way of going about it, and the image is too close to the text. I tried placing a margin and padding but that didn't work. To top of it off, the image is not vertically centered with the link text.

Anyone know of a proper way to do this as I am just going by trial and error?

Thank you in advance!