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!

Yanıtlar:


327

Bunu yapmanın daha kolay yolu sadece:

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

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 .


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


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


0

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

li span.show::after{
  content: url("/sites/default/files/new5.gif");
  padding-left: 5px;
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.