如何将`after`伪元素的内容属性设置为兄弟表单元素的属性答案

【问题标题】：How to set the content property of an `after` pseudo-element to an attribute of a sibling form element如何将`after`伪元素的内容属性设置为兄弟表单元素的属性
【发布时间】：2015-05-06 20:41:36
【问题描述】：

有没有办法使用 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 我可以做到这一点吗？

【问题讨论】：

不幸的是，通过 CSS 是不可能的。这种可能性在很多方面都会很棒:)
没有像 CSS4 这样的东西，也不会有 CSS5。 - 对于你的问题。 JavaScript 旨在使页面动态化。在你的情况下，这是要走的路。
技术上它是 CSS 级别 4（和 CSS 级别 3）。因为没有 CSS4，所以不会造成混淆。

标签： css css-content

【解决方案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() 功能对作者的巨大潜力。

【讨论】：

【解决方案2】：

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

$( '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>

【讨论】：

这几乎是我目前的解决方案。我只是对是否有纯 CSS 解决方案感兴趣。