Question

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?

Answer 1

I was able to accomplish this with answers provided on a different site, it can be done with two similar methods: As described Here

If you give the parent element position: relative, you can give those
pseudo elements position: absolute and position them more exactly.

And the second method is:

.nav li:hover a:before, .nav li:hover a:after {
content:url(../images/nav_bullet.png);
margin:0 5px;/* horizontal margin*/
position:relative;
top:2px;/* or what ever you need */
}

However, as I am learning everything by trial and error and even though this works, can anyone confirm whether or not this is the proper method to go about this or should I have went a different route to conform with compliance, standards, and compatibility?