¿Cómo colocarías una imagen de "asterisco requerido" delante de la primera letra de una etiqueta usando solo css?

Question

¿Es posible colocar una imagen de "asterisco requerido" delante de la primera letra de una etiqueta solo con css? El texto de la etiqueta está alineado a la derecha, por lo que hay una longitud de espacio variable delante del texto de cada etiqueta.

Answer 1

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

Answer 2

Es posible con algunos CSS, pero no funcionará con IE. Primero, debe crear una lista con viñetas.

A continuación, ocultar la lista de ítems-bala:

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

continuación, añadir un nuevo símbolo en frente de la lista de ítems:

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

Answer 3

sólo tiene que utilizar 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; } 

Vista previa: http://jsfiddle.net/Wexcode/j475V/1/

Answer 4

Si desea colocar una imagenel uso de CSS, sin modificar el contenido, entonces es necesario utilizar una imagen de fondo, por ejemplo,

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

Esto implica un problema de accesibilidad: personas que utilizan la navegación no visual no obtendrá la información sobre requiredness, ya que no hay forma de especificar una alternativa textual imagen de fondo a.

Por otra parte, para limitar el efecto que únicamente las etiquetas que se relacionan con los campos requeridos, lo que tendría que utilizar un selector de clase, digamos label.required, y añadir un atributo class a los label elementos pertinentes. Entonces supongo que podría modificar el contenido agregando una imagen real antes de los elementos relevantes label, sin recurrir a CSS, p. Ej.

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