Caracteres especiales html en contenido css, usando attr ()

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

EDITAR: El codepen usa Jade, y por lo tanto arruina algunas cosas. No estaba al tanto de esto cuando comencé esta pregunta. Esencialmente, pensé que CSS attr () copiaría literalmente un atributo HTML, pero ese no es el caso.

Me gustaría usar el CSSattr función para completar elcontent para algunos pseudoelementos Sin embargo, se imprime004 cuando el atributo HTML se establece en\f004y08fa cuando\f08fa.

Líneas relevantes:

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

¡Gracias!