html after before tags not work correct

Question

I have navigation div, there are buttons for example only img not links, I want before ant after this images add lines: I try :

#nav{                   
    height: 50px;
    width: auto;
    margin: 0 auto;
    margin-top: 30px;
    padding: 0;}

#nav ul li img{
    padding: 0; margin: 0;}

html:

<li><img src="./img/dot.gif" alt=""/></li>

I add to css this codes to add after and bofore images lines:

#nav ul li img:before{
  background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
  width: 40px; 
  height: 3px; 
  float: left; 
  padding-top: 45px;} 
#nav ul li img:after{
  background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
  width: 40px; 
  height: 3px; 
  float: left; 
  padding-top: 45px;} 

But doesn't display lines.

Answer 1

you can add

content:".";
text-indent:-9999em;
display:block

to your :before & :after. All this does is gives it something to "grab onto" and it should work.

If they're basic lines though, why not just add a border to one side of the li? :before and :after don't work in legacy browsers, so it's a more consistent experience if they're necessary.

Answer 2

According to this post, most browsers doesn't compute :before/:after for img tags. To help you anyway: Why don't you set lines by adding a border to the images. Or use :before/:after on the li tag?