如何使用CSS伪元素：before {content：''}影响< option>元件？ [英] How can I use the CSS pseudo-element :before{ content: '' } to affect an <option> element?
问题描述
如果我有一个optons列表，我如何使用CSS伪元素：before {content：''}影响< option> ？下面有三个选项，我想在每一个之前插入文本。
If I have a list of optons, how can I use the CSS pseudo-element :before{ content: '' } to affect the <option>? Below there are three options an I'd like to insert text before each one.
我知道这可以做javascript / jQuery，但是它可能与CSS？
I know this can be done wit javascript / jQuery, but is it possible with CSS?
<html>
<head>
<style>
option::before {
content: "sandy - "
}
</style>
</head>
<body>
<select>
<option>beach</option>
<option>field</option>
<option>carpet</option>
</select>
</body>
</html>
推荐答案
:: before 和 :: after 伪元素实际上在元素前面添加/附加一个子节点，所以这不会在任何不能包含子节点的元素
The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes.
这将是（大致）相当于：
It would be (roughly) the equivalent of doing:
<option><span>sandy - </span>beach</option>
如果要更新文本值，则需要使用JavaScript。
If you want to update the text value, you will need to use JavaScript.
这篇关于如何使用CSS伪元素：before {content：''}影响< option>元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
