Acest articol vă va ghida despre modificarea conținutului în CSS.
Cum se schimbă conținutul în CSS?
Pentru a schimba conținutul în CSS, vom folosi metodele de mai jos:
Să parcurgem fiecare metodă una câte una!
Metoda 1: Utilizați ::după Selector cu proprietatea conținutului pentru a schimba conținutul în CSS
„ ::după „Selector plasează conținutul specificat după elementul HTML folosind CSS „ conţinut ” proprietate. Această operațiune ajută la adăugarea conținutului la elementul selectat. În plus, „ afişa ”proprietatea poate fi utilizată pentru a ascunde conținutul existent.
Să aruncăm o privire la exemplul de mai jos pentru a înțelege cum să schimbați conținutul în CSS folosind selectorul ::after.
Exemplu
Iată pagina noastră HTML cu textul „ Buna dimineata!!! ”. Să înlocuim conținutul adăugat:
În prezent, am adăugat un „ „ etichetă cu text în secțiunea de corp a fișierului nostru HTML:
< p > Buna dimineata!!! < / p >În fișierul nostru CSS, vom folosi acum selectorul ::after ca „ corp::dupa ” și folosiți „ conţinut „proprietate cu valoarea „ Bună seara ” în cadrul definiției sale. Ca rezultat, selectorul CSS va plasa textul imediat după textul scris. În cele din urmă, ascundeți textul existent folosind „ afişa ” proprietate și setați valoarea acesteia la ” nici unul ”:
< stil >corp::dupa {
conţinut : 'Bună seara' ;
}
p {
afișaj: niciunul;
}
< / stil >
Acum, salvați fișierul HTML și deschideți-l simplu în browser sau utilizați „Server live ” în același scop:
După cum puteți vedea, conținutul a fost modificat cu succes folosind selectorul CSS ::after:
Metoda 2: Utilizați ::before Selector cu proprietatea conținut pentru a modifica conținutul în CSS
În CSS, „ ::inainte de Selectorul ” este utilizat pentru a face conținutul să apară chiar înaintea conținutului existent al unui element. Poate fi folosit în combinație cu „ conţinut ” proprietate pentru a adăuga conținut nou la elementul selectat.
Exemplu
Specificați selectorul ::before imediat după corp ca „ corp::inainte ”. Acest lucru va plasa noul conținut înaintea conținutului existent. Rețineți că toate celelalte proprietăți rămân aceleași ca în exemplul anterior:
< stil >corp::inainte {
conţinut : 'Bună seara' ;
}
p {
afișaj: niciunul;
}
< / stil >
Ieșire
Am explicat diferite metode de modificare a conținutului în CSS.
Concluzie
Pentru a schimba conținutul, „ ::după ' și ' ::inainte de „Selectoarele CSS sunt utilizate cu „ conţinut ” proprietate. În prima abordare, textul specificat este adăugat după elementul selectat, în timp ce al doilea selector CSS funcționează invers. În plus, „ afişa ”proprietatea poate fi utilizată pentru a ascunde conținutul existent al unui element. Acesta este modul în care conținutul este schimbat complet în CSS. Am acoperit cele două metode de modificare a conținutului în CSS.