Question

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

例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

此示例中所需的渲染输出为：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()函数中看到了很多潜力。

Answer 2

Hahaha LOL ..只是分享这有多么有趣......

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

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

2 个答案: