Reemplazar un texto se realiza principalmente en lenguajes de programación del lado del servidor, incluido PHP. Sin embargo, los desarrolladores ocasionalmente trabajan bajo algunas limitaciones y no pueden reemplazar el texto en el servidor. En tales escenarios, reemplazar el texto usando CSS es una buena opción. Si el usuario desea reemplazar el texto, CSS "contenidoSe puede utilizar la propiedad. Además, también puede diseñar el texto reemplazado con CSS.

Este tutorial examinará:

• Cómo agregar texto en html?
• Cómo reemplazar el texto con CSS?

Cómo agregar texto en html?

En HTML, el texto se puede agregar de diferentes maneras, como un elemento de encabezado "

"Se usa para agregar texto de encabezado, o el"

Revise las instrucciones proporcionadas para agregar el texto al documento HTML.

Paso 1: crear un contenedor "div"

Hacer un elemento "div" con la ayuda del "" etiqueta. Además, inserte un "identificación"Atributo para asignar un nombre específico a un elemento.

Paso 2: agregar texto

A continuación, utilice la etiqueta del párrafo "

"Y asignarlo un"clase" atributo. Luego, incruste algún texto entre las etiquetas del párrafo:

Linuxhint es uno de los mejores sitios web de tutoriales. (Texto viejo)

Se puede observar que el texto se ha agregado con éxito:

Paso 3: Elemento de estilo "Div"

Ahora, utiliza el "identificación"Selector e ID"#-Div principal"Para acceder al elemento" div ". Luego, aplique las propiedades establecidas:

#principal-div
borde: 3px negro sólido;
Color de fondo: RGB (179, 233, 250);
margen: 50px;
estilo de fuente: cursiva;

Aquí:

• "bordeLa propiedad se utiliza para definir un límite alrededor del elemento.
• "color de fondo"La propiedad asigna un color en la parte trasera del elemento.
• "margen"Especifica un espacio alrededor del límite del elemento.
• "Estilo de fuente"Determina el estilo específico para un texto como"itálico":

Cómo reemplazar el texto con CSS?

Para reemplazar el texto con CSS, primero, oculte el texto anterior utilizando el "visibilidad" propiedad. Luego, incruste el texto usando el "contenido" propiedad.

Para reemplazar el texto en CSS, pruebe el procedimiento dado.

Paso 1: esconde el texto antiguo

Primero, acceda al elemento donde ha incrustado el texto. En nuestro escenario, accederemos al "

"Elemento por el nombre de la clase".reemplazo de texto". Luego, aplique el "posición" y "visibilidad" propiedades:

.reemplazar-text
Posición: relativo;
Visibilidad: oculto;

Aquí el "posición"Especifica que el elemento se colocará en relación con su posición normal en la página web y el"visibilidadLa propiedad se usa para ocultar el elemento.

Producción

Paso 2: Reemplazar texto

Acceda al texto del "

"Etiqueta por clase".reemplazo de texto". Además, utilice la pseudo-clase ":después"Que insertará texto después del contenido del elemento seleccionado:

.reemplazar-text: después
Contenido: "Linuxhint es una organización con sede en el Reino Unido. (Nuevo texto)";
Posición: Absoluto;
Visibilidad: visible;
Izquierda: 0;
arriba: 0;

La descripción de las propiedades mencionadas anteriormente es la siguiente:

• "contenidoLa propiedad se utiliza para agregar el contenido en el elemento seleccionado.
• "izquierda"En CSS se usa para asignar la posición horizontal de un elemento que se coloca.
• "arriba"Especifica la posición en el lado superior de un elemento.
• "visibilidad"Está configurado como"visible"Para mostrar el contenido dentro del div.

Producción

Se puede notar que el texto se reemplaza con éxito utilizando CSS.

Conclusión

Para reemplazar el texto con CSS, primero, agregue el texto utilizando el "

" etiqueta. Entonces, acceda a la "

"Elemento en CSS usando la clase asignada y aplique el"visibilidad"Propiedad con el valor"oculto"Para ocultar el texto antiguo. Después de eso, use la pseudo-clase ":después"Con la clase asignada del"

" elemento. Reemplace el texto con la ayuda del "contenido"Propiedad, y nuevamente establece el"visibilidad"Propiedad como"visible". Esta publicación ha explicado el método para reemplazar el texto de HTML usando CSS.