如何使用 CSS 伪元素 :before{ content: '' } 影响
如果我有一个选项列表，如何使用 CSS 伪元素 :before{ content: '' } 来影响 ？下面有三个选项，我想在每个选项之前插入文本。
我知道这可以用 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>
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.
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
::before和::after伪元素实际上在元素前面/附加了一个子节点，因此这不适用于任何不能包含子节点的元素。这（大致）相当于：
如果你想更新文本值，你将需要使用 JavaScript。
The
::beforeand::afterpseudo-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:
If you want to update the text value, you will need to use JavaScript.
2018 年，这在 Chrome、Edge、Firefox 中确实有效，但前提是属性
size指定的值大于 1。Safari 缺乏支持。In 2018, this does work in Chrome, Edge, Firefox, but only if the attribute
sizeis specified with a value greater than 1. Safari lacks support.看来目前还不能。根据 W3，“本规范没有完全定义以下交互： before 和 :after 带有被替换的元素（例如 HTML 中的 IMG）”。一些被替换的元素是![]()
标签、插件（
不过，您可以使用 JavaScript 来完成此操作。哦，顺便说一句，content:、:before 和 :after 实际上是 CSS 2.1。
It appears that for now, you can't. According to the W3, "This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML)". Some replaced elements are <img> tags, plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags).
You can however do this with JavaScript. Oh and BTW, content:, :before, and :after are actually CSS 2.1.
测试表明，唯一确实支持在 OPTION 标记上使用 :before （或 ::before）生成内容的浏览器是 Firefox。所有其他大型浏览器都不接受它；正如有人在链接的其他问题中所述，这是符合标准的，因为他们没有明确说明如何在替换元素（例如选项）中管理生成的内容。
另一方面，在我看来，当使用 option::before 生成内容时，它在任何情况下都不会影响 SELECT 标签，这一事实是正确且非常有用的；我想到的第一个例子是，当您想要显示作为树元素的选项时，因此您想要根据树中的级别缩进它们，以提高 UI 清晰度。
在这种情况下，您肯定只想在打开的下拉列表中显示该选项时才执行此操作，而如果在关闭下拉列表时在选择中显示缩进，则只会造成麻烦。
Testing shows that the only browser which does indeed support generating content with :before (or ::before) on OPTION tags is Firefox. All the other big browser DO NOT accept it; this, as someone stated in the linked other question, is standard compliant, as they DO NOT explicitly state how generated content is to be managed in replaced elements such as OPTION.
On the other side, in my view the fact that, when generating content with option::before does work, it does not in any case affect the SELECT tag is correct and VERY USEFUL; the first example that comes to my mind is when you want to show options which are elements of a tree, and so you want to, as to increase UI clarity, indent them based on their level in the tree.
In that case, you surely want to do that ONLY when the option is shown in the opened drop down, while the indent would only be a nuisance if shown in the select when the drop down is closed.