HTML-Sonderzeichen in CSS-Inhalten mit attr ()

Relevante Codepen:http://codepen.io/anon/pen/ocptF/

EDIT: Der Codepen benutzt Jade und bringt so einiges durcheinander. Ich war mir dessen nicht bewusst, als ich diese Frage anfing. Grundsätzlich dachte ich, CSS attr () würde ein HTML-Attribut buchstäblich überschreiben, aber das ist nicht der Fall.

Ich möchte das CSS verwendenattr Funktion zum Ausfüllen dercontent für einige Pseudoelemente. Es wird jedoch ausgedruckt004 wenn das HTML-Attribut auf gesetzt ist\f004, und08fa wann\f08fa.

Relevante Zeilen:

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;
}

Vielen Dank!

Antworten auf die Frage(1)

Ihre Antwort auf die Frage