如何使用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'僞元素*的內容生成對'