Propiedad content de CSS
La propiedad content se utiliza junto con los pseudo-elementos ::before y ::after para generar contenido dentro de un elemento. Sin un valor explícito, los pseudo-elementos permanecen vacíos. La propiedad tiene los siguientes valores:
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
INFO
Los objetos insertados mediante la propiedad content son elementos reemplazados anónimos. Nota: La propiedad quotes debe establecerse en el elemento para que open-quote y close-quote rendericen comillas reales.
| Valor inicial | normal |
|---|---|
| Se aplica a | ::before y ::after pseudo-elementos. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | element.style.content = "none"; |
Sintaxis
Sintaxis de la propiedad content de CSS
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 content de CSS con 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>Resultado
Ejemplo de la propiedad content con el valor "string":
Ejemplo de la propiedad content de CSS con 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>En el siguiente ejemplo, puede 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>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>Valores
| Valor | Descripción |
|---|---|
| normal | Establece el contenido en normal. Este es el valor predeterminado. |
| none | Establece el contenido en nada. El pseudo-elemento no se genera. |
| counter | Establece el contenido en un valor de contador. |
| attr | Establece el contenido en el valor de un atributo del elemento seleccionado. |
| string | Establece el contenido en 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 en una URL que apunta a un recurso, como una imagen, sonido o video. Si la imagen no se puede mostrar, se ignorará o se mostrará un marcador de posición. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son las diferentes categorías de contenido CSS que se pueden usar para controlar el tamaño del contenido de una caja?