¿Cómo puedo usar el pseudo-elemento CSS: antes {content: ''} para afectar un elemento <option>?

Si tengo una lista de optons, ¿cómo puedo usar el pseudo-elemento CSS: before {content: ''} para afectar el <option>? A continuación hay tres opciones y me gustaría insertar texto antes de cada una.¿Cómo puedo usar el pseudo-elemento CSS: antes {content: ''} para afectar un elemento <option>?

Sé que esto se puede hacer con javascript/jQuery, pero ¿es posible con CSS?

<html> 
<head> 
    <style> 

     option::before { 
      content: "sandy - " 
     } 

    </style> 


</head> 
<body> 

<select> 
    <option>beach</option> 
    <option>field</option> 
    <option>carpet</option> 
</select> 


</body> 
</html>

Fuente

2012-02-08 cwd

Según lo mencionado por j08691 en su respuesta, ': before' no es nuevo en CSS3. También se llama un "pseudo-elemento": la etiqueta "pseudo" en la pregunta original probablemente esté allí porque no se pudo encontrar [pseudo-selector], es porque esa etiqueta se quemó. – BoltClock

Los pseudo-elementos ::before y ::after en realidad anteponen/añaden un nodo secundario al elemento, por lo que esto no funcionará en ningún elemento que no pueda contener nodos secundarios.

Sería (más o menos) el equivalente de hacer:

<option><span>sandy - </span>beach</option>

Si desea actualizar el valor de texto, que se necesitan para el uso de JavaScript.

Fuente

2012-02-08 17:34:03

Los pseudo-elementos * también pueden * afectar elementos vacíos (insertando contenido antes o después del contenido vacío), y los elementos 'opción 'ni siquiera están vacíos. –

Parece que, por ahora, no puede. De acuerdo con el W3, "Esta especificación no define completamente la interacción de: before y: after con elementos reemplazados (como IMG en HTML)". Algunos elementos reemplazados son <img> etiquetas, plugins (<objeto> etiquetas), y elementos de formulario (< botón >, <textarea>, <entrada>, y <seleccionar> etiquetas).

Puede hacer esto con JavaScript. Ah, y por cierto, content :,: before, and: after son en realidad CSS 2.1.

Fuente

2012-02-08 17:32:09 j08691

': before' no es nuevo en CSS3 - sin embargo, la notación de dos puntos' :: before' es. Fable dice que debemos continuar usando la notación de un solo punto para mantener sanos a los usuarios de IE8, pero me estoy desviando. – BoltClock

También se debe tener en cuenta que la generación de contenido con los pseudo-elementos ': before' y': after' * funciona * para los elementos '

¿Cómo puedo usar el pseudo-elemento CSS: antes {content: ''} para afectar un elemento <option>?

Respuesta