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!
