Come sostituire il testo con CSS?

Come sostituire il testo con CSS?
La sostituzione di un testo viene eseguita principalmente nei linguaggi di programmazione lato server, incluso PHP. Tuttavia, gli sviluppatori lavorano occasionalmente sotto alcune limitazioni e non possono sostituire il testo sul server. In tali scenari, sostituire il testo usando CSS è una buona scelta. Se l'utente desidera sostituire il testo, CSS "contenuto"La proprietà può essere utilizzata. Inoltre, puoi anche modellare il testo sostituito usando CSS.

Questo tutorial esaminerà:

  • Come aggiungere testo in HTML?
  • Come sostituire il testo con CSS?

Come aggiungere testo in HTML?

In HTML, il testo può essere aggiunto in diversi modi, come un elemento di intestazione "

"Viene utilizzato per aggiungere il testo dell'intestazione o"

Passa attraverso le istruzioni fornite per aggiungere il testo al documento HTML.

Passaggio 1: crea un contenitore "div"

Fare un elemento "div" con l'aiuto di ""Tag. Inoltre, inserire un "id"Attributo per allocare un nome specifico a un elemento.

Passaggio 2: Aggiungi testo

Successivamente, utilizzare il tag paragrafo "

"E assegnalo un"classe"Attributo. Quindi, incorporare un po 'di testo tra i tag di paragrafo:


Linuxhint è uno dei migliori siti Web di tutorial. (Vecchio testo)


Si può osservare che il testo è stato aggiunto con successo:

Passaggio 3: elemento "div" stile

Ora, utilizza il "id"Selettore e ID"#Main-Div"Per accedere all'elemento" div ". Quindi, applica le proprietà di seguito:

#main-div
Bordo: 3px Black solido;
Background-color: RGB (179, 233, 250);
Margine: 50px;
Font in stile: corsivo;

Qui:

  • "confine"La proprietà viene utilizzata per definire un limite attorno all'elemento.
  • "colore di sfondo"La proprietà assegna un colore sul retro dell'elemento.
  • "margine"Specifica uno spazio attorno al confine dell'elemento.
  • "stile carattere"Determina lo stile specifico per un testo come"corsivo":

Come sostituire il testo con CSS?

Per sostituire il testo con CSS, prima nascondi il testo precedente utilizzando il "visibilità" proprietà. Quindi, incorporare il testo usando il "contenuto" proprietà.

Per sostituire il testo in CSS, prova la procedura data.

Passaggio 1: nascondi il vecchio testo

Innanzitutto, accedi all'elemento in cui hai incorporato il testo. Nel nostro scenario accederemo al "

"Elemento dal nome della classe".Sostituisci il testo". Quindi, applica il "posizione" E "visibilità" proprietà:

.Sostituisci-text
Posizione: relativo;
Visibilità: nascosto;

Qui, il "posizione"Specifica che l'elemento verrà posizionato rispetto alla sua posizione normale sulla pagina Web e"visibilità"La proprietà viene utilizzata per nascondere l'elemento.

Produzione

Passaggio 2: sostituire il testo

Accedere al testo del "

Tag per classe ".Sostituisci il testo". Inoltre, utilizza la Pseudo-Classe ":Dopo"Che inserirà il testo dopo il contenuto dell'elemento selezionato:

.Sostituisci-text: dopo
Contenuto: "Linuxhint è un'organizzazione con sede nel Regno Unito. (Nuovo testo) ";
Posizione: assoluto;
Visibilità: visibile;
a sinistra: 0;
Top: 0;

La descrizione delle proprietà sopra menzionate è la seguente:

  • "contenuto"La proprietà viene utilizzata per aggiungere il contenuto nell'elemento selezionato.
  • "Sinistra"In CSS viene utilizzato per allocare la posizione orizzontale di un elemento posizionato.
  • "superiore"Specifica la posizione nella parte superiore di un elemento.
  • "visibilità"È impostato come"visibile"Per mostrare il contenuto all'interno del div.

Produzione

Si può notare che il testo viene sostituito correttamente usando CSS.

Conclusione

Per sostituire il testo con CSS, prima, aggiungi il testo utilizzando il “

"Tag. Quindi, accedi al "

"Elemento in CSS usando la classe assegnata e applica il"visibilità"Proprietà con il valore"nascosto"Per nascondere il vecchio testo. Successivamente, usa la Pseudo-Classe ":Dopo"Con la classe assegnata del"

"Elemento. Sostituisci il testo con l'aiuto di "contenuto"Proprietà e di nuovo impostare il"visibilità"Proprietà come"visibile". Questo post ha spiegato il metodo per sostituire il testo di HTML usando CSS.