Использование свойства attr (data-icon) для отображения unicode перед элементом

Давайте продемонстрируем пример с простым HTML-кодом:

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

Я хочу, чтобы этот элемент имел значок префикса, установленный этим атрибутом data (data-icon), поэтому я устанавливаю файл CSS следующим образом:

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

Мой желаемый результат этого примера будет выглядеть следующим образом:

▶Title

Вместо желаемого вывода все, что я могу получить, это:

\25B6Title

Итак, мой вопрос: что я делаю неправильно/что мне не хватает?

Пример JSFiddle: http://jsfiddle.net/Lqgr9zv6/

Ответы

Ответ 1

Экранирующие последовательности CSS работают только внутри строк CSS. Когда вы берете escape-последовательность CSS из атрибута HTML (т.е. вне CSS), она будет читаться буквально, а не интерпретироваться как часть строки CSS.

Если вы хотите закодировать символ в атрибуте HTML, вам необходимо закодировать его как сущность HTML. Это будет восприниматься CSS как соответствующий символ Unicode. Поскольку это шестнадцатеричная escape-последовательность, вы можете транслитерировать ее следующим образом:

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

В качестве альтернативы вы можете просто использовать сам символ Unicode:

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

[Незначительное дополнение]

Используйте нотацию Unicode, если значение атрибута должно быть реактивным в Vue или любой из ныне популярных платформ JavaScript.

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

Ответ 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;
}