web-dev-qa-db-ja.com

attr（data-icon）プロパティを使用して要素の前にUnicodeを表示する

次のような単純なHTMLコードを使用した例を示しましょう。

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

この要素のデータ属性（data-icon）によってプレフィックスアイコンを設定したいので、CSSファイルを次のように設定します。

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

この例の希望する出力は次のようになります。

▶Title

希望する出力の代わりに、私が得ることができるのはこれだけです：

\25B6Title

だから私の質問は：私は何が間違っているのか/私は何が欠けているのですか？

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

htmlcssunicodepseudo-elementcss-content
15
OutOfSpaceHoneyBadger

CSSエスケープシーケンスは、CSS文字列内でのみ機能します。 HTML属性からCSSエスケープシーケンスを取得すると（つまり、CSSの外部）、CSS文字列の一部として解釈されるのではなく、文字通りに読み取られます。

HTML属性内で文字をエンコードする場合は、HTMLエンティティとしてエンコードする必要があります。これは、CSSによって対応するUnicode文字として認識されます。これは16進数のエスケープシーケンスであるため、音訳できます そのように ：

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

または、 nicode文字自体を使用 ：

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

【マイナー追加】

Vueまたは現在人気のあるJavaScriptフレームワークのいずれかで、属性の値をreactiveにする必要がある場合は、Unicode表記を使用してください。

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