Snippets

Mostrar data-attribute de HTML5 con CSS

Sin Comentarios

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

Comentar

avatar