Propiedad CSS content

La propiedad content se usa con los pseudoelementos ::before y ::after para generar contenido dentro de un elemento. Sin un valor explícito, esos pseudoelementos no se renderizan en absoluto, por lo que content es lo que hace que aparezca una caja generada en primer lugar.

Esta página cubre cuándo y cómo usar content: insertar texto plano, obtener valores de atributos con attr(), numerar elementos con contadores CSS, incrustar imágenes y comillas, y los errores comunes que pueden surgir (como que el texto generado no sea accesible para los lectores de pantalla).

La propiedad acepta los siguientes valores:

normal
none
counter
attr
string
open-quote
close-quote
no-open-quote
no-close-quote
url

Información

El texto insertado con content no forma parte del DOM — no puedes seleccionarlo de la misma manera que seleccionas texto normal, y el soporte de tecnologías de asistencia es inconsistente. Úsalo para contenido decorativo o complementario, no para contenido que deba estar siempre disponible para todos los lectores. La propiedad quotes debe estar definida en el elemento para que open-quote y close-quote rendericen comillas reales.

Valor inicial	normal
Se aplica a	Pseudoelementos ::before y ::after.
Heredado	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	element.style.content = "none";

Sintaxis

Sintaxis de la propiedad CSS content

content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;

Ejemplo de la propiedad content:

Ejemplo de la propiedad CSS content con el valor normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
        content: "Name -";
      }
      .country::before {
        content: normal;
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <p>My name is John</p>
    <p class="country">I live in Canada</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad content con el valor "string":

Ejemplo de la propiedad CSS content con el valor string

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:before {
        content: "List item";
      }
      p:after {
        content: " with string value.";
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>Here is some paragraph</p>
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo, puedes ver que open-quote no puede aparecer sin close-quote.

Ejemplo de la propiedad content con el valor "open-quote":

Ejemplo de la propiedad content con los valores open-quote y close-quote

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        quotes: open-quote close-quote;
      }
      p::before {
        content: open-quote;
      }
      p::after {
        content: close-quote;
      }
    </style>
  </head>
  <body>
    <h2>Content property example</h2>
    <p>Hello, my name is John</p>
    <p>I am from Canada</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad content con los valores "open-quote" y "no-close-quote":

Ejemplo de la propiedad content con los valores "open-quote" y "no-close-quote":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
        content: open-quote;
      }
      p::after {
        content: no-close-quote;
      }
    </style>
  </head>
  <body>
    <p>Example with content property</p>
  </body>
</html>

Pruébalo tú mismo »

Usar el valor attr() para leer un atributo

attr() extrae el valor de un atributo HTML al contenido generado. Un uso común es mostrar el destino de un enlace, o mostrar un atributo data-* como una etiqueta tipo tooltip. El valor del atributo siempre se trata como una cadena de texto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a::after {
        content: " (" attr(href) ")";
        color: #888;
      }
    </style>
  </head>
  <body>
    <p>Visit <a href="https://www.w3docs.com">W3docs</a> to learn more.</p>
  </body>
</html>

Esto renderiza el enlace como Visit W3docs (https://www.w3docs.com) to learn more. — observa cómo una cadena de texto y attr() se concatenan simplemente escribiéndolos uno al lado del otro.

Usar contadores para numerar elementos

Los contadores CSS permiten generar números secuenciales sin modificar el HTML. Se inicializa un contador con counter-reset, se incrementa con counter-increment y se imprime con la función counter() dentro de content. Esta es la forma idiomática de numerar encabezados, pasos o figuras.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        counter-reset: section;
      }
      h2::before {
        counter-increment: section;
        content: "Section " counter(section) ": ";
      }
    </style>
  </head>
  <body>
    <h2>Introduction</h2>
    <h2>Installation</h2>
    <h2>Usage</h2>
  </body>
</html>

Cada <h2> recibe automáticamente el prefijo Section 1: , Section 2: y Section 3: .

Insertar una imagen con el valor url()

El valor url() incrusta un recurso externo — generalmente un icono pequeño — en la caja generada. Funciona bien para marcadores decorativos, pero como la imagen no está en el DOM no tiene texto alternativo, por lo que conviene evitarlo para imágenes con significado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .external::after {
        content: url("https://www.w3docs.com/build/img/favicon.ico");
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <p class="external">A link to an external resource</p>
  </body>
</html>

Advertencia

El contenido generado es decorativo por defecto. Los lectores de pantalla pueden omitirlo o leerlo de forma inconsistente según el navegador, y los usuarios no pueden copiarlo. Nunca pongas texto que el lector no deba perder (como un precio o un mensaje de error) únicamente dentro de un valor de content.

Valores

Valor	Descripción
normal	Establece el contenido como normal. Este es el valor predeterminado.
none	Establece el contenido como vacío. El pseudoelemento no se genera.
counter	Establece el contenido como un valor de contador.
attr	Establece el contenido como el valor de un atributo del elemento seleccionado.
string	Establece el contenido como una cadena de texto.
open-quote	Establece el contenido como una comilla de apertura.
close-quote	Establece el contenido como una comilla de cierre.
no-open-quote	Elimina la comilla de apertura del contenido.
no-close-quote	Elimina la comilla de cierre del contenido.
url	Establece el contenido como una URL que apunta a un recurso, como una imagen, sonido o video. Si la imagen no puede mostrarse, se ignorará o se mostrará un marcador de posición.
initial	Establece la propiedad a su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

La propiedad content solo tiene efecto en cajas generadas, por lo que casi siempre se usa junto con los pseudoelementos que las crean:

::before — inserta contenido generado antes del contenido propio de un elemento.
::after — inserta contenido generado después del contenido propio de un elemento.

Práctica

¿Cuáles afirmaciones sobre la propiedad CSS content son correctas?

Solo tiene efecto en los pseudoelementos ::before y ::afterattr() inserta el valor de un atributo HTML como una cadena de textoEl texto generado con content es completamente seleccionable y copiable como texto normal del DOMcounter() permite imprimir un contador CSS que se incrementaopen-quote renderiza una comilla incluso cuando la propiedad quotes no está definida