La contentpropiedad en CSS define el contenido de un elemento. Usted puede haber oído que esta propiedad sólo se aplica a las ::beforey ::afterlos pseudo-elementos. En este artículo, exploraremos varios casos de uso de la contentpropiedad, incluso fuera de los pseudoelementos.
Requisito previo
Dado que la mayoría de los casos de uso de la contentpropiedad implica pseudo-elementos, sugeriría que usted esté familiarizado con la forma en la ::beforey ::afterpseudo-elementos de trabajo. Aquí hay un gran artículo para ponerte al día:
- Pseudoelementos CSS: explicación de los selectores de antes y después
Valores aceptados
Primero, echemos un vistazo a todos los valores aceptados de la contentpropiedad.
normal: Este es el valor predeterminado. Calculanonecuando se usa con pseudoelementos.none: No se generará un pseudoelemento.: Establece el contenido en la cadena especificada. Esta cadena puede contener secuencias de escape Unicode. Por ejemplo, el símbolo de derechos de autor:\\000A9.: Establece el contenido en una imagen o degradado usandourl()olinear-gradient().open-quote|close-quote: Establece el contenido en el carácter de cita apropiado al que se hace referencia en laquotespropiedad.no-open-quote|no-close-quote: Elimina una cita del elemento seleccionado, pero aún aumenta o disminuye el nivel de anidamiento al que se hace referencia en laquotespropiedad.attr(*attribute*): Establece el contenido como el valor de cadena del atributo seleccionado de los elementos seleccionados.counter(): Establece el contenido como el valor de acounter, generalmente un número.
Cuerda
Uno de los ejemplos más básicos sería el uso de agregar contenido de cadena antes o después de un elemento. En este ejemplo, agregaremos un símbolo de enlace antes de un enlace y luego agregaremos la URL del enlace.
a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } Observe el espacio después del carácter Unicode en el ::beforepseudo-elemento y antes del primer paréntesis en el ::afterpseudo-elemento. Esto creará un espacio entre estos y el elemento principal.
Alternativamente, puede agregar paddingo margina los pseudo-elementos para agregar separación.
Cotizaciones básicas
Con la contentpropiedad, puede agregar comillas antes y / o después de los elementos. Ahora, en HTML tenemos la etiqueta. Esto también agregará citas sobre su contenido. Sin embargo, con la contentpropiedad, podemos tener más control sobre la implementación.
Aquí está el ejemplo más básico de agregar comillas:
También puede lograr esto utilizando la etiqueta HTML . Pero tal vez queramos darle un estilo diferente a la cita. Así que agreguemos solo la cita inicial y no la cita final. Y también diseñemos la cita de apertura.
p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } El resultado:
Cotizaciones avanzadas
También podemos especificar dónde no queremos comillas. Por ejemplo, puede estar citando a alguien que cita a otra persona. Por lo tanto, tendría citas entre comillas, lo que puede resultar confuso para el lector.
En el CodePen a continuación, usamos etiquetas HTML y luego especificamos qué etiquetas no deben mostrar las comillas.
A primera vista, podría pensar que deberíamos eliminar la etiqueta cuando sea necesario. Pero al especificar dónde no debe estar una cotización, aumenta o disminuye el nivel de anidamiento al que se hace referencia desde la quotespropiedad.
Para explicar esto, necesitamos comprender la quotespropiedad. Esto es simplemente una "matriz" de caracteres que deben usarse al citar. Aquí hay un ejemplo:
q { quotes: '“' '”' '‘' '’' '“' '”'; } Estos son conjuntos de citas. El primer conjunto se utilizará para el nivel superior de cotizaciones. El segundo conjunto se utilizará para la primera cotización anidada. Y el tercer conjunto se utilizará para la segunda cita anidada. Y así sucesivamente, si hubiera más conjuntos incluidos.
Ahora que entendemos la quotespropiedad, puedo explicar cómo funcionan las propiedades no-open-quotey no-close-quote.
Para cada nivel de citas, podemos asignar diferentes conjuntos de caracteres para usar en las citas. Al especificar dónde no debe estar una cotización, aumenta o disminuye el nivel de anidamiento al que se hace referencia desde la quotespropiedad.
Eche un vistazo al siguiente ejemplo. Verá que se omite el segundo nivel de citas.
Atributos
Los atributos se pueden utilizar para pasar contenido de HTML a la contentpropiedad CSS . De hecho, ya usamos esto en el ejemplo de enlace donde usamos el hrefatributo para incluir la cadena de URL como parte de nuestro contenido.
Un caso de uso perfecto para esto es una información sobre herramientas. Puede agregar un titleatributo a un elemento en HTML para tener una información sobre herramientas integrada simple al pasar el mouse. Pero para personalizar esto, podemos usar un atributo de datos en nuestra etiqueta HTML y luego usar la contentpropiedad para agregar una información sobre herramientas.
En este ejemplo, usamos el atributo data-tooltipde nuestro elemento HTML para pasar el valor a nuestra información sobre herramientas. Para el puntero de la información sobre herramientas, establecemos el contentto "", como contentse requiere para representar un elemento ::beforeo un ::afterpseudoelemento.
Contadores
La counter()función CSS devuelve una cadena que representa el valor actual del contador nombrado. En el siguiente ejemplo tenemos una lista ordenada que agregaremos contenido usando un counter.
ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } Sin profundizar demasiado en la counterfunción, primero tenemos que iniciar el contador en el olelemento. Podemos nombrar esto como queramos. Luego le decimos al contador que incremente en cada lielemento. Y por último, configuramos el contentde li::after.
Aquí está el resultado:
Puede usar esto para personalizar el contenido dentro de cada elemento de la lista que necesita un número correspondiente. O puede usar esto para personalizar el elemento de la lista. Por ejemplo, puede eliminar la numeración predeterminada e implementar un sistema de numeración de estilo personalizado.
Imagenes
Las imágenes y los degradados se pueden utilizar con la contentpropiedad. Esto es bastante sencillo. Aquí hay un ejemplo que usa ambos:
Para mayor accesibilidad, también hay una opción para agregar texto alternativo a la imagen. Sin embargo, esta función no es totalmente compatible.
content: url(//unsplash.it/200/200) / "Alternative Text Here"; Fuera de los pseudoelementos
¡Así es! Puede usar la contentpropiedad fuera de los pseudo-elementos ::beforey ::after. Aunque, su uso es limitado y no totalmente compatible en todos los navegadores.
El caso de uso más compatible sería el reemplazo de un elemento.
codeSTACKr #replace { content: url(""); width: 100%; } Conclusión
La mayoría de las veces que se verán content: ""encuentran en las ::beforey ::afterlos pseudo-elementos. Pero la contentpropiedad tiene muchas aplicaciones útiles.
En mi opinión, el mejor uso es usarlo para actualizar elementos masivos. Si desea agregar un ícono antes de cada enlace en su sitio, sería mucho más fácil agregarlo a través de la contentpropiedad que agregarlo a cada elemento en el documento HTML.
¡Gracias por leer!
Gracias por leer este artículo. Con suerte, le ha ayudado a comprender mejor cómo funciona la contentpropiedad en CSS.
Soy Jesse de Texas. Consulte mi otro contenido y déjeme saber cómo puedo ayudarlo en su camino para convertirse en desarrollador web.
- Suscribirse a mi YouTube
- ¡Di hola! Instagram | Gorjeo
- Inscríbete a mi boletín de noticias