CSS - contenido

Descripción

La propiedad de contenido define el contenido que se insertará en las operaciones de contenido generadas. Esta propiedad se usa junto con: before o: after pseudo elementos.

Valores posibles

string- Cualquier valor de cadena permitido. Siempre se incluye entre comillas.
URI - Un puntero a un recurso externo como una imagen.
counter- Hay dos formas posibles de este valor: contador (¿nombre, estilo?) Y contadores (nombre, cadena ,? estilo?). En ambos casos, el contenido será el valor del contador nombrado en ese punto del documento, representado en el valor de estilo opcional (decimal por defecto). En el caso de contadores (...), el valor de cadena opcional indica una cadena para seguir cada instancia del contador nombrado.
attr(X)- Provoca la inserción del valor del atributo X para el asunto del selector. Por ejemplo, es posible mostrar el valor del atributo alt de una imagen usando este valor.
open-quote - Provoca la inserción de la cadena apropiada especificada usando las comillas de propiedad.
close-quote - Provoca la inserción de la cadena apropiada especificada usando las comillas de propiedad.
no-open-quote- Evita la inserción de la cadena apropiada especificada usando las comillas de propiedad. Sin embargo, el nivel de anidamiento de las comillas sigue aumentando.
no-close-quote- Evita la inserción de la cadena apropiada especificada usando las comillas de propiedad. Sin embargo, el nivel de anidamiento de las comillas sigue disminuyendo.

Se aplica a

: antes y: después de los pseudoelementos.

Sintaxis DOM

object.style.content = "url(home.avi)"

Ejemplo

A continuación se muestra el ejemplo que demuestra cómo usar : before element para agregar algo de contenido antes de cualquier elemento.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Esto producirá el siguiente enlace negro:

A continuación se muestra el ejemplo que demuestra cómo usar : after element para agregar contenido después de cualquier elemento.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Esto producirá el siguiente enlace negro:

↰ Previous page