Questo articolo ti guiderà sulla modifica del contenuto in CSS.
Come modificare il contenuto nei CSS?
Per modificare il contenuto in CSS, utilizzeremo i seguenti metodi:
Esaminiamo ogni metodo uno per uno!
Metodo 1: utilizzare ::after Selector con la proprietà contenuto 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 ” può essere utilizzata per nascondere il contenuto esistente.
Diamo un'occhiata all'esempio seguente per capire come modificare il contenuto in CSS utilizzando il selettore ::after.
Esempio
Ecco la nostra pagina HTML con il testo “ Buongiorno!!! ”. Sostituiamo il contenuto aggiunto:
Attualmente, abbiamo aggiunto un ' ' tag con testo nella sezione del corpo del nostro file HTML:
< p > Buongiorno!!! < / p >Nel nostro file CSS, useremo ora il selettore ::after come ' corpo::dopo ” e usa il “ contenuto ” proprietà con il valore “ buona serata ” 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 ” e impostarne il valore su “ nessuno ”:
< stile >corpo::dopo {
contenuto : 'Buona serata' ;
}
p {
display: nessuno;
}
< / stile >
Ora salva il tuo file HTML e aprilo semplicemente sul browser o usalo “Server dal vivo ” allo stesso scopo:
Come puoi vedere, il contenuto è stato modificato correttamente utilizzando il selettore ::after CSS:
Metodo 2: utilizzare ::before Selector con la proprietà contenuto per modificare il contenuto in CSS
Nei CSS, il ' ::prima Il selettore ” viene utilizzato per far apparire il contenuto subito prima del contenuto esistente di un elemento. Può essere utilizzato in combinazione con il “ contenuto ” per aggiungere nuovo contenuto all'elemento selezionato.
Esempio
Specificare il selettore ::before subito dopo il corpo come ' corpo::prima ”. Questo posizionerà il nuovo contenuto prima del contenuto esistente. Si noti che tutte le altre proprietà rimangono le stesse dell'esempio precedente:
< stile >corpo::prima {
contenuto : 'Buona serata' ;
}
p {
display: nessuno;
}
< / stile >
Produzione
Abbiamo spiegato diversi metodi per modificare il contenuto nei CSS.
Conclusione
Per modificare il contenuto, ' ::dopo ' e ' ::prima ' I selettori CSS vengono utilizzati con ' contenuto ' proprietà. Nel primo approccio, il testo specificato viene aggiunto dopo l'elemento selezionato, mentre il secondo selettore CSS funziona in modo opposto. Inoltre, il “ Schermo La proprietà ” può essere utilizzata per nascondere il contenuto esistente di un elemento. In questo modo il contenuto viene completamente modificato in CSS. Abbiamo trattato i due metodi per modificare il contenuto in CSS.