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

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

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

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

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

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

▶Title

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

B6Title

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

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

10
css css-content html pseudo-element unicode

2 ответов

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

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

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

можно просто используйте сам символ Юникода:

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

вы можете uss 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;
}
-1