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

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

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>

Respuestas a la pregunta(8)

Su respuesta a la pregunta