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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

（大致）等同于：

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

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

以上是 如何使用CSS伪元素：before {content：``}来影响 元件？ 的全部内容， 来源链接： utcz.com/qa/411492.html

回到顶部