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

Question

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

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

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

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

我想要的这个例子的输出是这样的：

▶Title

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

B6Title

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

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

Answer 1

CSS 转义序列仅适用于 CSS 字符串。当您从 HTML 属性（即 CSS 之外）获取 CSS 转义序列时，它将按字面意思读取，而不是解释为 CSS 字符串的一部分。

如果要在 HTML 属性中对字符进行编码，则需要将其编码为 HTML 实体。这将被 CSS 视为相应的 Unicode 字符。由于这是一个十六进制转义序列，您可以将其音译为 like so:

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

或者你可以 use the Unicode character itself:

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

如果属性的值需要在 Vue 或任何现在流行的 JavaScript 框架中 反应式 ，请使用 JavaScript 转义序列符号，在 JavaScript 字符串中（如果您感到困惑，请注意以下示例中的嵌套引号）：

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

Answer 2

您可以使用 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;
}

Answer 3

如果您使用 JavaScript 动态设置 data-icon 属性，而您不能像我做不到的那样硬编码表情符号，你必须使用 String.fromCodePoint():

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

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

Using attr(data-icon) property to display unicode before element

html

css

unicode

pseudo-element

css-content

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

Using attr(data-icon) property to display unicode before element

html

css

unicode

pseudo-element

css-content

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