如何将after伪元素的content属性设置为兄弟表单元素的属性

Question

有没有办法使用CSS将after伪元素的内容设置为同级表单元素的属性？

例如：

p:after{
  content: +select(attr(title));
}

<p>Message: </p>

<select>
  <option title="Hi" value="1">Hi</option>
  <option title="Hello" value="2" selected>Hello</option>
  <option title="Goodbye" value="3">Goodbye</option>
</select>

在此示例中，所需的渲染输出为： Message: Hello

如果当前无法做到这一点，那么CSS4（或5？）规范中是否有任何计划允许在content属性中使用选择器？

我有一个jQuery解决方案，但是我很好奇这是否可以不用javascript吗？

Answer 1

该attr()函数只能从CSS 级别 2和CSS 值级别 3中的原始元素获取属性（后者甚至尚未实现）。

第 4 级模块的工作尚未开始，但考虑到非元素选择器模块的引入，该模块当前具有属性节点选择器，因此将此类功能合并到第 4 级模块中并不是那么牵强。attr()功能。但考虑到人们对实施 3 级缺乏兴趣，而且多年来attr()该级一直处于危险之中，我真的不会屏住呼吸。这真是一个遗憾，因为我也看到了 CSS 功能对于作者的巨大潜力。attr()