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

Question

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

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

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

Answer 1

Самый простой способ сделать это просто:

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

Answer 2

Попробуйте это:

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

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

Также я исправил синтаксис / порядок вашей background декларации.

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

Примечание: это работает и со спрайтами изображений

Answer 4

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

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

Answer 5

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

Answer 6

Мое решение сделать это:

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