en este tips te enseñare como mostrar el contenido de los atributos de datos de HTML5 con CSS. Realmente es muy fácil, solo debemos de utilizar los Pseudo elementos :before o :after, todo dependerá de la ubicación en que queramos mostrar el contenido. Veamos:

crearemos un elemento y le vincularemos un atributo de dato o “data-attribute” y le añadiremos algún valor.

<div animal-type="Caballo">Animal - </div>

como sabes utilizamos los atributos de datos para almacenar tipos de datos personalizados y privados en nuestra página o aplicación. saber mas: HTML data-* Attributes

Sigamos con el CSS.

div:after {
   content: attr(data-animal-type);
}

Lo que hacemos es mostrar el contenido por medio del content que podemos utilizar con los Pseudo elementos de CSS, y como valor aplicamos el nombre del dato que queremos mostrar, esto por medio de el selector de atributos de css.

Otra forma sería la siguiente, siendo un poco mas especifico:

[data-animal-type]:after {
   content: attr(data-animal-type);
}

Resultado:

See the Pen Mostrar atributo de datos con CSS by frontend (@tutosytips) on CodePen
20550