如何将 `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

哈哈哈哈哈..只是分享这有多有趣..

$( 'p' ).after('<style></style>');
$( 'select' ).on( 'change', function(){
//$( 'p' ).text('Message: ' +$( 'select option:selected' ).text());
$( 'style' ).html('p:after{content: "'+$( 'select option:selected' ).text()+'" }');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 2

attr() 函数只能从原始元素获取属性，两者都在 CSS level 2 and CSS Values level 3 (the latter of which hasn't even been implemented yet)。

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

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

How to set the content property of an `after` pseudo-element to an attribute of a sibling form element

css

css-content

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

How to set the content property of an `after` pseudo-element to an attribute of a sibling form element

css

css-content

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