Hola, acá les dejo un post que me resultó bien útil el uso de esta propiedad de css, la cual no sabía que existía y revisando unos ejemplos la encontré.
La propiedad content es una de las propiedades CSS más poderosas y a la vez más complicadas, se emplea para generar nuevo contenido de forma dinámica e insertarlo en la página HTML. Como CSS es un lenguaje de hojas de estilos cuyo único propósito es controlar el aspecto o presentación de los contenidos, algunos diseñadores defienden que no es correcto generar nuevos contenidos mediante CSS.
En primer lugar, el estándar CSS 2.1 indica que la propiedad content sólo puede utilizarse en los pseudo-elementos :before y :after. Como su propio nombre indica, estos pseudo-elementos permiten seleccionar (y por tanto modificar) la parte anterior o posterior de un elemento de la página.
Ejemplos practicos
cómo añadir la palabra Firefoxmania delante del contenido de cada título de sección <h1>:
h1:before { content: "Firefoxmania ";}
Los pseudo-elementos :before y :after se pueden utilizar sobre cualquier elemento de la página. El siguiente ejemplo añade la palabra Nota: delante de cada párrafo cuya clase CSS sea nota:
p.nota:before { content: "Nota: ";}
Combinando las propiedades content y quotes con los pseudo-elementos :before y :after, se pueden añadir de forma dinámica comillas de apertura y de cierre a todos los elementos <blockquote> de la página:
blockquote:before {
content: open-quote;}
blockquote:after {
content: close-quote;
}
blockquote {
quotes: "«" "»";
}
Los contenidos insertados dinámicamente en un elemento son a todos los efectos parte de ese mismo elemento, por lo que heredan el valor de todas sus propiedades CSS.
Los dos valores más sencillos de la propiedad content son none y normal. En la práctica, estos dos valores tienen el mismo efecto ya que hacen que el pseudo-elemento no se genere.
El siguiente valor que se puede indicar en la propiedad content es una cadena de texto. En el estándar CSS 2.1, una cadena de texto es un conjunto de uno o más caracteres encerrados por las comillas dobles (") o las comillas simples (‘). Si la cadena contiene comillas dobles, se encierra con las comillas simples y viceversa. Si una cadena de texto tiene tanto comillas simples como dobles, las comillas problemáticas se modifican y se les añade la barra invertida \ por delante:
p:before {
content: "Contenido generado \"dinámicamente\" mediante CSS. ";}
#ultimo:after {
content: " Fin de los 'contenidos' de la página.";
}
Las cadenas de texto sólo permiten incluir texto básico. Si se incluye alguna etiqueta HTML en la cadena de texto, el navegador muestra la etiqueta tal y como está escrita, ya que no las interpreta. Para incluir un salto de línea en el contenido generado, se utiliza el caracter especial \A
El siguiente valor aceptado por la propiedad content es una URL, que suele utilizarse para indicar la URL de una imagen que se quiere añadir de forma dinámica al contenido. La sintaxis es idéntica al resto de URL que se pueden indicar en otras propiedades CSS:
span.especial:after {
content: url("imagenes/imagen.png");
}
Otros valores que se pueden indicar en la propiedad content son open-quote, close-quote, no-open-quote y no-close-quote. Los dos primeros indican que se debe mostar una comilla de apertura o de cierre respectivamente. Las comillas utilizadas se establecen mediante la propiedad quotes:
blockquote {
quotes: "«" "»" '"' '"' }
blockquote:before {
content: open-quote;
}blockquote:after {
content: close-quote;
}
Hasta aquí algunos ejemplos del uso de esta potente propiedad, que nos permite
controlar ciertos aspectos sin el uso de javascript.
hola …seria bueno que dejarán un link a un ejemplo práctico, aparte del código explicado como lo han hecho ..felicidades por el nuevo sitio, realmente nos hacia falta.
Estoy totalmente de acuerdo seria muy buen un ejemplo
Muy bueno este tutorial. No sabía que existía esta propiedad, o mejor dicho, su uso porque la había visto en códigos y eso pero por gusto, jejeje.