Bir etiketin ilk harfinin önüne 'css kullanarak' gerekli yıldız işareti 'görüntüsünü nasıl yerleştirirsiniz?

Question

'Css kullanarak etiketin ilk harfinin önüne' gerekli yıldız işareti 'resmi yerleştirmek mümkün mü? Etiketin metni sağa hizalı olduğundan, her etiketin metninin önünde değişen bir uzunluk alanı vardır.

Answer 1

.foo:before { 
    content : "* "; 
    color : red; 
} 

Answer 2

Bazı CSS'lerle mümkündür, ancak IE ile çalışmaz. Öncelikle, madde işaretli bir liste oluşturmanız gerekir.

Sonraki liste maddelik-mermiyi gizlemek:

ul > li { 
    list-style-type:none; 
    list-style-position:inside; 
} 

sonra liste öğesi önünde yeni bir sembol ekleyin:

ul > li:before { 
    content:"* "; 
} 

Answer 3

Sadece padding kullanın.

<label for="required"><span>Required</span></label> 
<input type="text" name="required" id="required" /> 

CSS:

label { 
    text-align: right; 
    width: 200px; 
    vertical-align: middle; 
    display: inline-block; } 
label span { 
    background: url(http://placehold.it/5x5) 0 0 no-repeat; 
    padding: 0 0 0 6px; 
    vertical-align: middle; 
    display: inline-block; } 
input { 
    vertical-align: middle; 
    display: inline-block; } 

Önizleme: içerik değiştirmeden, CSS kullanarak bir görüntü yerleştirmek isterseniz http://jsfiddle.net/Wexcode/j475V/1/

Answer 4

, o zaman bir arka plan görüntüsü kullanmak gerekir, örneğin

label { 
    padding-left: 12px; 
    background: url(asterisk.png) no-repeat; 
} 

Bu bir erişilebilirlik sorunu ima: Bir arka plan görüntüsüne bir metinsel alternatif belirtmek için bir yolu yoktur çünkü Nonvisual tarama kullanan insanlar, requiredness hakkında bilgi alamayacak. Gerekli alanlar ile ilgilidir ancak böyle etiketlere etkisini sınırlamak için Öte yandan

, sen, label.required söylemek bir sınıf seçici kullanmak gerekir ve ilgili label elemanlarına bir class özniteliği eklersiniz. Daha sonra, ilgili label öğelerinden önce gerçek bir görüntü ekleyerek, içeriği CSS'ye başvurmadan değiştirebileceğinizi varsayalım.

<img src=asterisk.png alt="Required "><label ...