如何使用CSS伪元素：before {content：''}来影响<option>元素？

如果我有一个opton列表，我如何使用CSS伪元素：before {content：''}来影响<option>？下面有三个选项，我想在每个选项之前插入文本。如何使用CSS伪元素：before {content：''}来影响<option>元素？

我知道这可以通过JavaScript/jQuery来完成，但它可能与CSS？

<html> 
<head> 
    <style> 

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

    </style> 


</head> 
<body> 

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


</body> 
</html>

来源

2012-02-08 cwd

正如j08691在他的回答中所提到的，'：before'对CSS3并不陌生。它也被称为“伪元素” - 原始问题中的“伪”标记可能存在，因为您无法找到[伪选择器] - 这是因为该标记已被刻录。 – BoltClock 2012-02-08 18:00:34

::before和::after伪元素实际将/子节点附加/追加到元素，所以这不适用于任何不能包含子节点的元素。

这将是（粗略地）做等价的：

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

如果要更新文本值，则需要使用JavaScript。

来源

2012-02-08 17:34:03

伪元素*可能会影响空元素（在空内容之前或之后插入内容），并且'option'元素甚至不是空的。 – 2013-08-09 17:09:55

现在看来，你不能。根据W3，“本规范没有完全定义：替换元素之前：之前和之后：如HTML中的IMG”。一些替换元素是<IMG>标签，插件（<对象>标签），和形式的元件（<按钮>，< textarea的>，<输入>，和<选择>标签）。

然而，你可以用JavaScript来做到这一点。哦，顺便说一下，内容：，：之前，和：之后其实都是CSS 2.1。

来源

2012-02-08 17:32:09 j08691

'：before'对CSS3来说并不陌生 - 然而，双冒号记号':: before'是。寓言说，我们应该继续使用单冒号记号来保持IE8用户的健康，但我离题了。 – BoltClock 2012-02-08 17:51:09

还应该注意的是，带'：before'和'：after'伪元素*的内容生成对'