Este artículo lo guiará sobre cómo cambiar el contenido en CSS.
¿Cómo cambiar el contenido en CSS?
Para cambiar el contenido en CSS, utilizaremos los siguientes métodos:
- ::después del selector con la propiedad de contenido
- ::antes del selector con la propiedad de contenido
¡Repasemos cada método uno por uno!
Método 1: use :: after Selector con la propiedad de contenido para cambiar el contenido en CSS
Los ' ::después El selector 'coloca el contenido especificado después del elemento HTML usando el CSS' contenido ' propiedad. Esta operación ayuda a agregar el contenido al elemento seleccionado. Adicionalmente, el “ monitor La propiedad ” se puede utilizar para ocultar el contenido existente.
Echemos un vistazo al siguiente ejemplo para entender cómo cambiar el contenido en CSS usando el selector ::after.
Ejemplo
Aquí está nuestra página HTML con el texto “ ¡¡¡Buenos días!!! ”. Reemplacemos el contenido agregado:
Actualmente, hemos agregado un “ “ etiqueta con texto en la sección del cuerpo de nuestro archivo HTML:
< pags > ¡¡¡Buenos días!!! < / pags >En nuestro archivo CSS, ahora usaremos el selector ::after como “ cuerpo::después ” y usa el “ contenido ” propiedad con el valor “ Buenas noches ” dentro de su definición. Como resultado, el selector de CSS colocará el texto justo después del texto escrito. Por último, oculta el texto existente usando el botón “ monitor ” propiedad y establezca su valor en “ ninguna ”:
< estilo >cuerpo::después {
contenido : 'Buenas noches' ;
}
pags {
pantalla: ninguno;
}
< / estilo >
Ahora, guarde su archivo HTML y simplemente ábralo en el navegador o use “Servidor en vivo ” con el mismo propósito:
Como puede ver, el contenido se ha cambiado correctamente utilizando el selector ::after CSS:
Método 2: Use ::before Selector con propiedad de contenido para cambiar el contenido en CSS
En CSS, el “ ::antes de El selector se utiliza para hacer que el contenido aparezca justo antes del contenido existente de un elemento. Se puede utilizar en combinación con el “ contenido ” propiedad para agregar nuevo contenido al elemento seleccionado.
Ejemplo
Especifique el selector ::before justo después del cuerpo como ' cuerpo::antes ”. Esto colocará el nuevo contenido antes del contenido existente. Tenga en cuenta que todas las demás propiedades siguen siendo las mismas que en el ejemplo anterior:
< estilo >cuerpo::antes {
contenido : 'Buenas noches' ;
}
pags {
pantalla: ninguno;
}
< / estilo >
Producción
Hemos explicado diferentes métodos para cambiar el contenido en CSS.
Conclusión
Para cambiar el contenido, “ ::después ' y ' ::antes de ” Los selectores CSS se utilizan con el “ contenido ' propiedad. En el primer enfoque, el texto especificado se agrega después del elemento seleccionado, mientras que el segundo selector de CSS funciona de manera opuesta. Además, el “ monitor La propiedad ” se puede utilizar para ocultar el contenido existente de un elemento. Así es como se cambia completamente el contenido en CSS. Hemos cubierto los dos métodos para cambiar el contenido en CSS.