Genera contenido en tu web con CSS y la propiedad ‘content’

Recuerdo un día que me volví loca buscando entre un matojo de código un carácter » o un &raquo; que me aparecía justo delante de todos los elementos de listas (<li>), por más que buscaba entre el html, el php, el javascript,.. nanai.
Pero cuál fué mi sorpresa cuando aplicando estilo a la web (ya habiendome dado por vencida) me apareció una propiedad que no conocia: content. Y junto a ella el símbolo ». ¡Aleluya! Ahí es donde nacía mi amiguito…

Y dicho todo esto, os cuento lo que os interesa xD

Hay una forma de añadir texto a nuestra web a través del CSS, todo es gracias a la propiedad content. Se pueden incluir cadenas de texto, imágenes, contadores, comillas, y más cosas que aún estoy investigando. La forma de hacerlo es fácil, tienes que elegir un elemento y aplicarle el pseudo-elemento :before (antes) o :after (después).
Por lo que, sólo puedes incluir contenido antes o después de un elemento ya incrustado en la web.

Cómo a todos nos gustan más los ejemplos que las descripciones, ahí van:

a:before { content:"Ahora viene un enlace: "; } /* texto antes de los enlaces */
a:after { content:" lo de antes era un enlace"; } /* texto despues de los enlaces */

Quedaría así: Ahora viene un enlace: enlace lo de antes era un enlace

a:after {
content: "("attr(title)")"; /* title de los enlaces */
content: "("attr(href)")"; /* url */
}

Quedaría así: enlace (titulo del enlace) (url del enlace)

img:after {
content: "("attr(alt)")"; /* muestra texto alternativo de las imágenes, después de mostrarlas */
}

Quedaría así: imagen (texto alternativo de la imagen)

li:before {
content: url("imagenes/imagen.png"); /* añade una imagen antes de cada li */
}

Quedaría así: imagen Texto dentro de la etiqueta <li>

Notas:
1.- Donde pongo imagen iría una imagen, sólo que estoy vaga para buscar imágenes para poner de ejemplo, perdonadme xD
2.- Para escribir cadenas de texto debéis escribirlo entre comillas (“), cómo he hecho yo, en los ejemplos de los paréntesis “(” y “)”, ya que el paréntesis en sí, es “texto”.
3.- Con attr conseguimos atributos de elementos, por ahora sé que se pueden utilizar estos tres: title y url para los enlaces y alt para las imágenes, no sé si existirán más, ya lo investigaré :P si alguien sabe que nos cuente!
4.- También se pueden crear contadores, pero no lo he mirado mucho por lo que no puedo explicaros su funcionamiento, pero más adelante os lo contaré no os ansiéis xD

Y esto es todo amigos! Espero que os sirva para algo ^^

  • 12 diciembre 2008
  • css

2 comments on “Genera contenido en tu web con CSS y la propiedad ‘content’”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *