1. 首页
  2. 问题
  3. 如何使用CSS伪元素：before {content：``}来影响 元件？
一尘不染

如何使用CSS伪元素：before {content：``}来影响 元件？

css

如果我有一个光子列表，如何使用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>

阅读 466

收藏
2020-05-16

共1个答案

一尘不染

实际上，::before和和::after伪元素在子元素之前/之后添加了一个子节点，因此，这对不能包含子节点的任何元素都无效。

（大致）等同于：

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

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

2020-05-16