Come posizioneresti un'immagine 'asterisco richiesto' davanti alla prima lettera di un'etichetta usando solo css?

Question

È possibile posizionare un'immagine 'asterisco richiesto' davanti alla prima lettera di un'etichetta solo usando css? Il testo dell'etichetta è allineato a destra, quindi c'è una lunghezza variabile di spazio davanti al testo di ciascuna etichetta.

Answer 1

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

Answer 2

È possibile con alcuni CSS, ma non funzionerà con IE. Innanzitutto, è necessario creare un elenco puntato.

Avanti, nascondere la lista-item-proiettile:

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

quindi aggiungere un nuovo simbolo di fronte alla lista-item:

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

Answer 3

Basta usare padding.

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

in anteprima: http://jsfiddle.net/Wexcode/j475V/1/

Answer 4

Se si desidera inserire un'immagineusando i CSS, senza modificarne il contenuto, allora avete bisogno di utilizzare un'immagine di sfondo, per esempio

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

Questo implica un problema di accessibilità: persone che utilizzano la navigazione non visivo non ottengono le informazioni su requiredness, poiché non v'è alcun modo di specificare un testo alternativo a un'immagine di sfondo.

D'altra parte, per limitare l'effetto solo a tali etichette che riguardano i campi richiesti, si avrebbe bisogno di utilizzare un selettore di classe, diciamo label.required, e aggiungere un attributo class alle pertinenti label elementi. Quindi suppongo che potresti anche modificare il contenuto aggiungendo un'immagine reale prima degli elementi rilevanti label, senza ricorrere a CSS, ad es.

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