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

144

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

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

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

css

— Zac
источник

327

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

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

— jimyi
источник

А также некоторые проблемы с этим в Firefox

— Johnny_D

204

Имейте в виду, что IE7 отстой.

— Big McLargeHuge

@RichardGarside "doctype", вы просто имеете в виду что-то вроде этого наверху? <!DOCTYPE html>

— Джо Морано

Проблема этого метода заключается в том, что вы не можете предоставить альтернативный текст для изображения, что (в зависимости от того, для чего используется изображение) может снизить доступность.

— Дэмиен

2

Но вы не можете указать высоту / ширину изображения, используя это.

— Фейсал Ашфак

82

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

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

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

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

— Тайсон
источник

13

Мне нравится эта техника над более простыми, потому что она дает вам контроль над размером изображения, используя background-image-size.

— Эндрю Хеджес

2

Это также понадобится вам, если вы хотите центрировать изображение по горизонтали. Вы не можете расположить его, left: 50%потому что он не будет выровнен по центру. left: 0; width: 100%Вместо этого используйте и установите фоновое положение на 50%. Хорошо работает для меня. Спасибо за подсказку об обязательном contentатрибуте.

— ygoe

1

Это был лучший ответ, а также, если вы используете загрузчик, вам может потребоваться использовать display: inline-block; в противном случае изображение будет под каждым элементом li, а не справа или слева

— Marvel Moe

1

Выглядит великолепно, но для отображения изображения встроенным (после «li») должно быть «display: inline-block».

— Дэдпул

а такжеbackground-size: container

— Роджер

11

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

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

— jonnocraig
источник

4

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

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

— Габриэль Херли
источник

1

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

— Chưa biết
источник

0

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

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

— Matt
источник