La propiedad de contenido en CSS se usa para generar el contenido dinámicamente (durante el tiempo de ejecución), es decir, reemplaza el elemento con el valor del contenido generado. Se utiliza para generar contenido ::before & ::after pseudo-element .
Sintaxis:
content: normal|none|counter|attr|string|open-quote|close-quote| no-open-quote|no-close-quote|url|initial|inherit;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
normal: se usa para establecer el contenido si la propiedad del contenido es normal, también se usa para establecer el valor predeterminado.
Sintaxis:
Element::before|after {
content: normal;
}
Ejemplo: Este ejemplo demuestra el uso de la propiedad content para generar contenido ::before & ::after pseudo-element.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: normal;
}
</style>
</head>
<body>
<p>to GeeksforGeeks</p>
<p id="a">you</p>
</body>
</html>
Producción:
Welcome to GeeksforGeeks Welcome you
none: No establece el contenido antes y después del pseudo-elemento.
Sintaxis:
Element::before|after {
content: none;
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el contenido dentro de la etiqueta <p> se mostrará dinámicamente con diferentes valores.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: "Hello";
}
p#a::before {
content: none;
}
</style>
</head>
<body>
<p> GeeksforGeeks!</p>
<p id="a">Welcomes to GeeksforGeeks!</p>
</body>
</html>
Producción:
Hello GeeksforGeeks! Welcome to GeeksforGeeks!
initial: Establece la propiedad a su valor por defecto.
Sintaxis:
Element::before|after {
content: initial;
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el contenido se muestra en su valor inicial.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: initial;
}
</style>
</head>
<body>
<p>to GeeksforGeeks</p>
<p id="a">you</p>
</body>
</html>
Producción:
Hello GeeksforGeeks! Hello Welcomes to GeeksforGeeks!
atributo: Establece el valor del atributo que contiene un valor especificado.
Sintaxis:
Element::before|after {
content:attr(href);
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el valor del atributo se establece en los valores especificados.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
a::after {
content: attr(href);
}
</style>
</head>
<body>
<a href=
"https://www.geeksforgeeks.org/html-style-attribute/">
Click Here!
</a>
</body>
</html>
Producción:
Click Here! https://www.geeksforgeeks.org/html-style-attribute/
String: se utiliza para generar cualquier string antes y después del elemento HTML.
Sintaxis:
Element::before|after {
content: string;
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el valor de string generará cualquier string antes y después del elemento HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS | content Property</title>
<style>
/* String value used here */
p::before {
content: "Hello";
}
</style>
</head>
<body>
<p> GeeksforGeeks!</p>
</body>
</html>
Producción:
Hello GeeksforGeeks!
open-quote: Genera una comilla de apertura antes y después de un elemento.
Sintaxis:
Element::before|after {
content: open-quote;
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el valor de la propiedad de contenido se establece en comillas abiertas.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Producción:
"Welcome to GeeksforGeeks!
close-quote: Genera una comilla de cierre antes y después de un elemento.
Sintaxis:
Element::before|after {
content: close-quote;
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el valor de la propiedad de contenido se establece en comillas de cierre.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::after {
content: close-quote;
}
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Producción:
"Welcome to GeeksforGeeks!"
no-open-quote: Elimina la comilla de apertura del contenido si se especifica.
Sintaxis:
Element::before|after {
content: no-open-quote;
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el valor de la propiedad de contenido se establece en sin comillas abiertas.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: open-quote;
}
p::before {
content: no-open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Producción:
Welcome to GeeksforGeeks!
no-close-quote: Elimina las comillas de cierre del contenido si se especifica.
Sintaxis:
Element::before|after {
content: no-close-quote;
}
Ejemplo: este ejemplo demuestra el uso de la propiedad de contenido donde el valor de la propiedad de contenido se establece en sin comillas de cierre.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Producción:
"Welcome to GeeksforGeeks!
heredar: esta propiedad se hereda de su elemento padre.
Sintaxis:
Element::before|after {
content: inherit;
}
Navegadores compatibles: los navegadores compatibles con la propiedad de contenido se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 8.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 4.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por AkshayGulati y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA