Вставить изображение после каждого элемента списка

Каким будет лучший способ вставить небольшое изображение после каждого элемента списка? Я попробовал его с псевдо-классом, но что-то не так...

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

Спасибо за любую помощь!

Ответ 1

Более простой способ сделать это:

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

Ответ 2

Попробуйте следующее:

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

Вам нужно объявление content: "";, чтобы предоставить созданный контент элемента, даже если этот контент "ничего".

Кроме того, я исправил синтаксис/порядок вашего объявления background.

Ответ 3

Для поддержки 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%;
}

Примечание. Это также работает с спрайтами изображений.

Ответ 4

Я думаю, ваша проблема в том, что: после psuedo-element требуется свойство content: внутри. Вам нужно сказать, что нужно что-то вставить. Вы даже можете просто вставить изображение напрямую:

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

Ответ 5

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

Ответ 6

Мое решение для этого:

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