各リストアイテムの後に画像を挿入する

各リスト要素の後に小さな画像を挿入する最良の方法は何でしょうか？疑似クラスで試してみたが何かがおかしい…

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

助けてくれてありがとう！

簡単な方法は次のとおりです。

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

これを試して：

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

content: "";コンテンツが「何もない」場合でも、生成された要素のコンテンツを提供するには宣言が必要です。

また、background宣言の構文/順序を修正しました。

IE8サポートの場合、「content」プロパティを空にすることはできません。

これを回避するために、私は次のことを行いました：

.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%;
}

注：これは画像スプライトでも機能します

あなたの問題は、：after psuedo-elementにcontent：プロパティを設定する必要があることだと思います。何かを挿入するように指示する必要があります。画像を直接挿入することもできます。

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

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

これを行う私の解決策：

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