Вставте зображення після кожного елемента списку

143

Який був би найкращий спосіб вставити невелике зображення після кожного елемента списку? Я спробував це з класом псевдо, але щось не так ...

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

Дякуємо за будь-яку допомогу!

css

— Зак
джерело

326

Найпростіший спосіб зробити це просто:

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

— джимі
джерело

А також деякі проблеми з цим у 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

Мені подобається ця техніка над простими, оскільки вона дає вам контроль над розміром зображення, використовуючи розмір фонового зображення.

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

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

— roger

11

Для підтримки IE8 властивість "вміст" не може бути порожньою.

Щоб обійти це, я зробив наступне:

.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

Я думаю, що ваша проблема полягає в тому, що: після psuedo-елемента вимагає вміст: властивість, встановлений всередині нього. Вам потрібно сказати, щоб щось вставити. Можна навіть просто вставити зображення безпосередньо:

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

— Метт
джерело