Insert image after each list item

user_82330 0
Viewed 315383

What would be the best way to insert a small image after each list element? I tried it with a pseudo class but something is not right...

ul li a:after {
  display: block;
  width: 3px;
  height: 5px;
  background: url ('../images/small_triangle.png') transparent no-repeat;
}

Thanks for any help!

css
6 Answers

The easier way to do it is just:

ul li:after {
    content: url('../images/small_triangle.png');
}
user_1154810

Try this:

ul li a:after {
    display: block;
    content: "";
    width: 3px;
    height: 5px;
    background: transparent url('../images/small_triangle.png') no-repeat;
}

You need the content: ""; declaration to give your generated element content, even if that content is "nothing".

Also, I fixed the syntax/ordering of your background declaration.

Tyson_430040

I think your problem is that the :after psuedo-element requires the content: property set inside it. You need to tell it to insert something. You could even just have it insert the image directly:

ul li:after {
    content: url('../images/small_triangle.png');
}
user_1146720
Related