使用attr(data-icon)属性在元素之前显示unicode

Question

让我们演示一个简单的HTML代码的示例：

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

我希望此元素具有由其数据属性设置的前缀图标（data-icon），因此我设置了这样的CSS文件：

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

我所需的此示例的输出看起来像：

▶Title

而不是所需的输出，我能得到的就是：

25B6Title

所以我的问题是：我在做什么错或我想念什么？

jsfiddle示例：http：//jsfiddle.net/lqgr9zv6/

Answer 1

css逃脱序列仅在CSS字符串中起作用。当您从HTML属性（即在CSS之外）中获取CSS逃生序列时，它将被从字面上读取，而不是解释为CSS字符串的一部分。

如果要在HTML属性中编码字符，则需要将其编码为HTML实体。CSS将其视为相应的Unicode字符。由于这是一个十六进制的逃生序列，您可以像这样翻译：

<div data-icon="&#x25B6;">Title</div>

另外，您只需使用Unicode字符本身：

<div data-icon="▶">Title</div>

如果属性的值需要在vue或现在流行的JavaScript框架中反应性，请在JavaScript字符串中使用 javascript eassect序列符号（如果您"很困惑，只需注意以下示例中的嵌套引号）：

<div :data-icon="'u25b6'">Title</div>

Answer 2

如果您要使用 javascript 设置data-icon属性，并且您无法像我一样可以硬编码表情符号'

DivElement.dataset.icon = String.fromCodePoint("0x25B6");
// yields: <div data-icon="▶">Title</div>

Answer 3

您可以使用CSS三角箭头。http://jsfiddle.net/lqgr9zv6/3/

div{
position:relative;
text-indent:12px;
}

div:before {
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #000;
}