La propiedad Content de CSS

3 minutos de lectura

Fecha: 18/12/2014

Una de las propiedades mas potentes que tiene CSS en la actualidad es la propiedad content, esta permite que nosotros a traves de un lenguaje que esta orientado a la maquetacion y los estilos como es css, insertemos contenido en la web (algo para lo que deberiamos hacerlo mediante el propio lenguaje HTML).

Esto genera cierta controversia pues como deciamos es usurpar un rol de otro lenguaje, css le esta robando el trabajo a HTML, hasta ahora en la programacion de paginas web se habia definido lo que debiamos hacer a traves de cada uno de los lenguajes que se emplean en su contruccion, y aunque esto si somos estrictos esto no es muy correcto pues CSS no esta pensado para generar contenido web, podemos ver que su uso es beneficioso si empleamos esta propiedad de forma puntual.

Limitaciones

La propiedad content solo se puede aplicar dentro de los pseudo-elementos “:before” y “:after”, es importante que lo tengas en cuenta.

Dentro podemos definir una cadena de texto pero obviamente debemos escapar las comillas que usemos para encapsularla con la barra invertida.

Con las cadenas de texto se inserta solo texto básico, no podemos incluir etiquetas de html (podemos intentarlo y no va a fallar pero devolverá el texto tal cual).

Podemos interpolar en su interior funciones de CSS, el ejemplo clásico es el de la función attr()

a:after {
  content: " (" attr(href) ")";
}

Pero podemos usar otras.

Casos de uso

Un ejemplo de como esta propiedad nos ayuda y hasta genera un codigo mas limpio y sostenible es en los formularios, pensemos en el siguiente escenario:

Tenemos un formulario, el cual tiene campos que son obligatorios y otros que no lo son, por supuesto visualmente queremos que se distingan unos de otros, y como asignar un color o un efecto a la tipografia pudiera no ser suficientemente explicito en muchos casos se ha optado por poner al final del campo obligatorio un asterisco y al pie del formulario el asterisco con una leyenda que dice algo asi como (*) Campos Obligatorios.

En un caso como este vamos a tener que escribir en todos los campos que sean obligatorios este asterisco que es un contenido de la web (pequeño pero es contenido), ¿no sería mas sencillo que todos las labels que pertenezcan a un campo obligatorio automaticamente generen este asterisco al final?

Pues aquí entra la propiedad content, generamos una clase que tenga esta propiedad y se la asignamos a todas las labels de un campo obligatorio, el código seria algo así…

label:before{
  color: #e32;
  content: "*";
  vertical-align: super;
  font-size: 80%;
  display: inline;
}

Si como suele suceder algunos campos son obligatorios y otros no podemos apoyarnos en una clase auxiliar modificando mínimamente este código.

label.required:before{
  color: #e32;
  content: "*";
  vertical-align: super;
  font-size: 80%;
  display: inline;
}

Ahora solo si la label tiene la clase «required» mostrata un asterisco.

Otro uso que le podemos dar es el de incluir un icono de fuentes de iconos como FontAwesome o Glyphicons, y esto nos da una potencia enorme. Pensemos por ejemplo en el mismo caso de antes, un asterisco, dentro de FontAwesome también tenemos uno, que sería este.

Podemos incluirlos en nuestra página usando las clases que ellos marcan o con la propiedad content mediante los caracteres unicode de cada uno, si quieres saber cuales son estos códigos pulsa aquí!

Una vez consultado el asterísco es este código  de manera que haríamos así.

label.required:before{
  color: #e32;
  font-family: 'FontAwesome';
  content: "069";
  vertical-align: super;
  font-size: 80%;
  display: inline;
}

Existen otros usos prácticos como la manipulación de contadores dentro de listas, supongamos que creamos una lista numerada con esta estructura…

<ol>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento
    <ol>
        <li>Elemento</li>
        <li>Elemento
          <ol>
            <li>Elemento</li>
            <li>Elemento</li>
            <li>Elemento</li>
          </ol>
        </li>
        <li>Elemento</li>
    </ol>
  </li>
  <li>Elemento</li>
</ol>

El resultado es este…

1. Elemento
2. Elemento
3. Elemento
   1. Elemento
   2. Elemento
      1. Elemento
      2. Elemento
      3. Elemento
   3. Elemento
4. Elemento

Mientras que si modificamos sus contadores mediante la propiedad content agregando siempre una referencia al listado padre con este código:

ol {
  counter-reset: elemento;
  list-style-type: none;
}
li:before {
  content: counters(elemento, '. ') ". ";
  counter-increment: elemento;
}

Ahora se ve así…

Estos son los casos que yo más he utilizado cuando juego con esta propiedad, vosotros seguro que encontrais nuevas maneras de uso.