Insert image after each list item

Css

Css Problem Overview

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 Solutions

Solution 1 - Css

The easier way to do it is just:

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

Solution 2 - Css

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.

Solution 3 - Css

For IE8 support, the "content" property cannot be empty.

To get around this I've done the following :

.ul li:after {
    content:"icon";
    text-indent:-999em;
    display:block;
    width:32px;
    height:32px;
    background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
    margin:5% 0 0 45%;
}

Note : This works with image sprites too

Solution 4 - Css

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');
}

Solution 5 - Css

ul li + li:before
{
    content:url(imgs/separator.gif);
}

Solution 6 - Css

My solution to do this:

li span.show::after{
  content: url("/sites/default/files/new5.gif");
  padding-left: 5px;
}
Categories
Recommended Css Solutions

Previous Solution:

Database Structure for Tree Data Structure

SqlDatabase DesignTree

Next Solution:

Is it good style to explicitly return in Ruby?

RubyCoding StyleReturn Value

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZacView Question on Stackoverflow
Solution 1 - CssjimyiView Answer on Stackoverflow
Solution 2 - CssTysonView Answer on Stackoverflow
Solution 3 - CssjonnocraigView Answer on Stackoverflow
Solution 4 - CssGabriel HurleyView Answer on Stackoverflow
Solution 5 - CssChưa biếtView Answer on Stackoverflow
Solution 6 - CssMattView Answer on Stackoverflow