Her liste öğesinden sonra resim ekle

144

Her liste öğesinden sonra küçük bir resim eklemenin en iyi yolu nedir? Bir sözde sınıf ile denedim ama bir şey doğru değil ...

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

Herhangi bir yardım için teşekkürler!

css

— Zac
kaynak

327

Bunu yapmanın daha kolay yolu sadece:

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

— jimyi
kaynak

Firefox'ta da bununla ilgili bazı sorunlar

— Johnny_D 28:13

204

IE7'nin berbat olduğunu unutmayın.

— Büyük McLargeHuge

@RichardGarside "doctype" ile sadece üstte böyle bir şey mi demek istiyorsun? <!DOCTYPE html>

— Joe Morano

Bu yöntemin sorunu, görüntü için (görüntünün ne için kullanıldığına bağlı olarak) erişilebilirliği azaltabilecek alternatif bir metin sağlayamamanızdır.

— Damien

2

Ancak bunu kullanarak görüntüye yükseklik / genişlik veremezsiniz.

— Faisal Ashfaq

82

Bunu dene:

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

Bu content: "";içerik "hiçbir şey" olmasa bile, oluşturulan öğe içeriğinizi vermek için bildirime ihtiyacınız vardır .

Ayrıca, backgroundbeyanınızın sözdizimini / sırasını düzelttim .

— agresif
kaynak

13

Bu tekniği daha basit olanlardan çok seviyorum çünkü arka plan görüntüsü boyutunu kullanarak görüntünün boyutu üzerinde kontrol sağlıyor.

— Andrew Hedges

2

Bir görüntüyü yatay olarak ortalamak istiyorsanız buna da ihtiyacınız olacaktır. Sen bunu konumlandırmak olamaz left: 50%ortada hizalanmış olmaz çünkü. left: 0; width: 100%Arka plan konumunu kullanın ve bunun yerine% 50 olarak ayarlayın. Benim için iyi çalışıyor. Gerekli contentözellik hakkında ipucu için teşekkürler .

— ygoe

1

Bu daha iyi bir yanıttı ve ayrıca bootstrap kullanıyorsanız display'i kullanmanız gerekebilir: inline-block; aksi takdirde görüntü her li öğesinin altında olacak ve sağ veya solda olmayacak

— Marvel Moe

1

Harika görünüyor ancak resmi satır içi görüntülemek için ("li" den sonra) "display: inline-block" olmalıdır.

— Deadpool

ve ayrıcabackground-size: container

— roger

11

IE8 desteği için "content" özelliği boş bırakılamaz.

Bu sorunu çözmek için aşağıdakileri yaptım:

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

Not: Bu, görüntü sprite'larıyla da çalışır

— jonnocraig
kaynak

4

Senin sorunun olduğunu düşünüyorum: after psuedo-element içeriği: özelliği içinde set gerektirir. Bir şey eklemesini söylemelisin. Görüntüyü doğrudan eklemesini bile sağlayabilirsiniz:

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

— Gabriel Hurley
kaynak

1

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

— Chưa biết
kaynak

0

Bunu yapmak için benim çözüm:

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

— Mat
kaynak