html - attr() を使用した CSS コンテンツの html 特殊文字

Question

関連するコードペン: http://codepen.io/anon/pen/ocptF/

編集: codepen は Jade を使用しているため、いくつかの点が台無しになっています。この質問を始めたとき、私はこれに気づいていませんでした。基本的に、CSS attr() は文字通り HTML 属性をコピーすると思っていましたが、そうではありません。

attrCSS関数を使用して、いくつかの疑似要素を埋めたいと思いcontentます。ただし、004HTML 属性が に設定されている場合\f004、および.08fa\f08fa

関連する行:

HTML:

<div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div>

CSS:

.zoomfade:before {
  content: attr(data-unfill);
  position: absolute;
}

.zoomfade:before {
  content: attr(data-fill);
  position: absolute;
}

ありがとう！