css - 如何将 `after` 伪元素的内容属性设置为同级表单元素的属性

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 level 2 中。和 CSS Values level 3 (后者为 hasn't even been implemented yet )。

4 级模块的工作尚未开始，但考虑到 Non-element Selectors module 的引入，目前具有属性节点选择器，将这样的功能合并到 4 级 attr() 函数中并不是那么牵强。但考虑到人们对实现 3 级 attr() 缺乏兴趣，这 年 以来一直处于危险之中，我真的不会屏住呼吸。这真是一种耻辱，因为我也看到了作者的 CSS attr() 函数的很多潜力。