Properly create centered vertical navigation list with a hover image on both sides?

HTML & CSS
1

Hello,

I have a navigation list I placed inside of a <ul>, 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!

2

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

3

Hi,

As Ralph said you could place those elements absolutely with the benefit that they won’t upset the flow of the page and that you can also place them exactly.

Using your existing method you could also tweak things like this but will only work on centred lists otherwise the text may jump when hovered.


.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 */
}
4

You guys are amazing!!! Thank you so much, works flawlessly!

One quick question though, is this the method either of you would use to create the same type of effect or would you go a different route? I am doing everything by trial and error and I know there is a million ways to accomplish a single thing but I would like to make sure I am going the proper route regarding standards, compliance, and compatiblility rather than just crazy gluing something together so it works :).

5

One thing i would do differently is define the pseudo elements prior to the hover state as with each hover your asking the browser to re-draw the secret element causing a loss of performance overall, see the below link which is a simple demo i made showing that you can achieve the same result but simply hiding the elements until you hover over the parent.

6

I was about to post another question because I wasn’t sure how to apply the after/before on the same element I had the hover on. The problem with my code above is the hover was applied to the li which caused the bullets to appear when you weren’t actually on the link but just the list item. I didn’t know I was able to do a:hover:before :wink:

Using your advice I am using the code below which seems to be working perfectly:

.nav a:before, .nav a:after {
content:url(../images/nav_bullet.png);
margin:0 7px;/* horizontal margin*/
position:relative;
top:-4px;
display:none;
}

.nav a:hover:before,.nav a:hover:after{
    display:inline-block;
}

Definitely appreciate the tip, I didn’t know that the element had to be redrawn each time.