Come modificare il contenuto in CSS

Come modificare il contenuto in CSS
Nelle applicazioni Web, ogni sviluppatore si sforza di migliorare l'aspetto e l'esperienza generale dell'utente da ogni aspetto. A volte gli sviluppatori vogliono fare le cose in modo diverso e migliore di altri. Ad esempio, mostrando un testo su qualcosa e poi cambiandolo in qualcos'altro secondo gli aggiornamenti. Tutto ciò potrebbe essere fatto con l'aiuto di CSS diverse proprietà e selettori.

Questo articolo ti guiderà sulla modifica dei contenuti in CSS.

Come modificare il contenuto in CSS?

Per modificare il contenuto in CSS, useremo i metodi seguenti:

  • :: Dopo il selettore con la proprietà del contenuto
  • :: prima del selettore con la proprietà del contenuto

Passiamo attraverso ogni metodo uno per uno!

Metodo 1: Utilizzare :: After Selector con proprietà Content per modificare il contenuto in CSS

IL "::Dopo"Il selettore posiziona il contenuto specificato dopo l'elemento HTML utilizzando il CSS"contenuto" proprietà. Questa operazione aiuta ad aggiungere il contenuto all'elemento selezionato. Inoltre, il "Schermo"La proprietà può essere utilizzata per nascondere il contenuto esistente.

Diamo un'occhiata all'esempio seguente per capire come modificare il contenuto in CSS usando il :: After Selector.

Esempio

Ecco la nostra pagina HTML con il testo "Buongiorno!!!". Sostituiamo il contenuto aggiunto:

Attualmente abbiamo aggiunto un "

Buongiorno!!!

Nel nostro file CSS, ora useremo il :: After Selector come "corpo :: dopo"E usa il"contenuto"Proprietà con il valore"Buonasera"All'interno della sua definizione. Di conseguenza, il selettore CSS posizionerà il testo subito dopo il testo scritto. Infine, nascondi il testo esistente usando il "Schermo"Proprietà e impostare il suo valore su"nessuno":

Ora, salva il tuo file HTML e aprilo semplice sul browser o usa “Live Server"Per lo stesso scopo:

Come puoi vedere, il contenuto è stato modificato con successo utilizzando il selettore :: After CSS:

Metodo 2: usa :: prima del selettore con proprietà del contenuto per modificare il contenuto in CSS

In CSS, il “::Prima"Il selettore viene utilizzato per far apparire il contenuto proprio prima del contenuto esistente di un elemento. Può essere usato in combinazione con "contenuto"Proprietà per aggiungere nuovi contenuti all'elemento selezionato.

Esempio

Specifica il :: prima del selettore subito dopo il corpo come "corpo :: prima". Questo posizionerà i nuovi contenuti prima del contenuto esistente. Si noti che tutte le altre proprietà rimangono le stesse dell'esempio precedente:

Produzione

Abbiamo spiegato diversi metodi per modificare il contenuto in CSS.

Conclusione

Per cambiare il contenuto, "::Dopo" E "::Prima"I selettori CSS sono usati con il"contenuto" proprietà. Nel primo approccio, il testo specificato viene aggiunto dopo l'elemento selezionato, mentre il secondo selettore CSS funziona al contrario. Inoltre, il "Schermo"La proprietà può essere utilizzata per nascondere il contenuto esistente di un elemento. Ecco come il contenuto viene modificato completamente in CSS. Abbiamo coperto i due metodi per cambiare il contenuto in CSS.