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

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?