相关疑难解决方法(0)

让我们演示一个简单的HTML代码示例,如下所示:

<div data-icon="\25B6">Title</div>

我希望这个元素有一个由它的数据属性(data-icon)设置的前缀图标,所以我设置了这样的CSS文件:

div:before {
    content: attr(data-icon);
}

我希望这个例子的输出看起来像这样:

?Title

所有我能得到的不是所需的输出,而是:

\25B6Title

所以我的问题是:我做错了什么/我错过了什么？

JSFiddle示例:http://jsfiddle.net/Lqgr9zv6/

相关代码:http://codepen.io/anon/pen/ocptF/

编辑:codepen使用Jade,因此混淆了一些东西.在开始这个问题时我没有意识到这一点.从本质上讲,我认为CSS attr()会在字面上复制HTML属性,但事实并非如此.

我想使用CSS attr函数填写content一些伪元素.然而,它打印出来004时,HTML属性设置为\f004,与08fa时\f08fa.

相关专线:

HTML:

<div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div>

CSS:

.zoomfade:before {
  content: attr(data-unfill);
  position: absolute;
}

.zoomfade:before {
  content: attr(data-fill);
  position: absolute;
}

谢谢!