Cambiar contenido en CSS

1. Use el pseudoelemento :after y la propiedad display para reemplazar texto en CSS
2. Utilice el pseudoelemento :before y la propiedad visibility para reemplazar texto en CSS

El tutorial presentará algunas formas de cambiar o reemplazar el contenido en CSS.

Use el pseudoelemento :after y la propiedad display para reemplazar texto en CSS

Podemos usar los pseudo-elementos en CSS para cambiar o reemplazar los contenidos escritos en HTML. Luego usa el pseudo-elemento :after y la propiedad content para lograr nuestro objetivo.

Use el selector :after para agregar algún contenido después del contenido seleccionado. Para agregar el contenido, usamos la propiedad content.

Podemos escribir el contenido deseado como el valor de la propiedad content. Para reemplazar o cambiar el contenido, podemos ocultar el contenido escrito anteriormente y utilizar la propiedad content, seleccionando el elemento con el selector :after.

Este método establece la propiedad display en none para ocultar el texto anterior.

Por ejemplo, crea un div con la clase text. Dentro del div, escribe una etiqueta span y the original text dentro del span.

En CSS, seleccione el intervalo y establezca su propiedad display en none. A continuación, utilice el selector :after para seleccionar la clase text.

Finalmente, escriba la propiedad content y establezca su valor en the changed text en el cuerpo.

Cuando se ejecuta el fragmento de código del siguiente ejemplo, se muestra the changed text. Aquí, el texto the original text se elimina del documento y actúa como si el elemento no existiera.

Esto se debe a que el valor de la propiedad content ocupará su espacio. Como resultado, se mostrará el nuevo contenido.

<div class="text">
<span>the original text</span>
</div>

.text span {
 display: none;
}
.text:after {
 content: 'the changed text';
}

Utilice el pseudoelemento :before y la propiedad visibility para reemplazar texto en CSS

Podemos cambiar el contenido escrito en HTML usando el pseudo-elemento :before en CSS. El pseudoelemento :before funciona de manera similar al pseudoelemento :after, pero el contenido se presenta aquí.

Úselo para escribir el contenido antes del elemento seleccionado. Este método utiliza la propiedad content como en el primer método.

Además, podemos usar la propiedad visibility para ocultar el contenido anterior y configurarlo como hidden.

Cuando se establece en hidden, la propiedad visibility hará que el contenido sea invisible, pero el espacio en blanco se mostrará en el documento. Pero, usar el selector :before anulará el espacio con el nuevo contenido.

Por ejemplo, seleccione el elemento span y establezca su propiedad visibility en hidden en el ejemplo utilizado en el primer método.

Pero recuerde eliminar los estilos aplicados anteriormente. A continuación, seleccione la clase text con el selector :before y escriba el nuevo contenido como en el ejemplo siguiente.

Utilice display:none para ocultar el contenido anterior. Sin embargo, no podemos usar visibility:hidden mientras usamos el selector :after ya que se conservará el espacio del elemento oculto.

<div class="text">
<span>before</span>
</div>

.text span {
 visibility:hidden;
}
.text:before {
 content: 'after';
}