content
proprietatea în CSS definește conținutul unui element. Este posibil să fi auzit că această proprietate se aplică numai pentru ::before
și ::after
pseudo-elemente. În acest articol, vom explora diverse cazuri de utilizare pentru content
proprietate, inclusiv în afara pseudo-elementelor.
Condiție prealabilă
Deoarece majoritatea cazurilor de utilizare pentru content
proprietatea implică pseudo-elemente, aș sugera să fiți familiarizați cu modul în care ::before
și ::after
funcționează pseudo-elementele. Iată un articol minunat pentru a vă aduce la curent:
-
Pseudo-elemente CSS – explicate selectoarele înainte și după
Valori acceptate
În primul rând, să aruncăm o privire asupra tuturor valorilor acceptate ale content
proprietate.
-
normal
: Aceasta este valoarea implicită. Calculează lanone
atunci când este utilizat cu pseudo-elemente. -
none
: Un pseudo-element nu va fi generat. -
<string>
: Setează conținutul la șirul specificat. Acest șir poate conține secvențe de evadare Unicode. De exemplu, simbolul drepturilor de autor:\000A9
. -
<image>
: Setează conținutul la o imagine sau un gradient folosindurl()
saulinear-gradient()
. -
open-quote
|close-quote
: Setează conținutul la caracterul citat corespunzător la care se face referire dinquotes
proprietate. -
no-open-quote
|no-close-quote
: Elimină un citat din elementul selectat, dar crește sau micșorează nivelul de cuibărire la care se face referire dinquotes
proprietate. -
attr(*attribute*)
: Setează conținutul ca valoare șir a atributului selectat pentru elementele selectate. -
counter()
: Setează conținutul ca valoare acounter
, de obicei un număr.
Şir
Unul dintre cele mai de bază exemple ar fi utilizarea adăugării şir conținut înainte sau după un element. În acest exemplu, vom adăuga un simbol de link înainte de un link și vom adăuga adresa URL pentru link după acesta.
a::before {
content: "\1F517 ";
}
a::after {
content: " (" attr(href) ")";
}
Observați spațiul după caracterul Unicode din ::before
pseudo-element și înainte de prima paranteză în ::after
pseudo-element. Acest lucru va crea spațiu între acestea și elementul părinte.
Alternativ, ați putea adăuga padding
sau margin
la pseudo-elemente pentru a adăuga separare.
Citate de bază
Cu content
proprietate, puteți adăuga ghilimele înainte și / sau după elemente. Acum, în HTML avem <q>
etichetă. Aceasta va adăuga, de asemenea, citate în jurul conținutului său. Cu toate acestea, cu content
proprietate, putem avea mai mult control asupra implementării.
Iată cel mai simplu exemplu de adăugare de ghilimele:
Puteți realiza acest lucru și utilizând eticheta HTML <q>
. Dar poate că vrem să stilăm citatul în mod diferit. Deci, să adăugăm doar citatul de deschidere și nu citatul de final. Și să stilăm și citatul de deschidere.
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba(0, 0, 0, 0.5)
}
Rezultatul:

Citate avansate
De asemenea, putem specifica unde facem nu vreau citate. De exemplu, este posibil să citați pe cineva care cită o altă persoană. Așadar, ați avea ghilimele între ghilimele, care pot deveni confuze pentru cititor.
În CodePen de mai jos, folosim HTML <q>
etichete, apoi specificând ce etichete nu trebuie să afișeze ghilimelele.
La prima vedere, ați putea crede că ar trebui să eliminăm <q>
etichetați acolo unde este necesar. Dar prin specificarea în care un citat nu trebuie să fie în continuare crește sau scade nivelul de cuibărire la care se face referire din quotes
proprietate.
Pentru a explica acest lucru, trebuie să înțelegem quotes
proprietate. Acesta este pur și simplu o „matrice” de caractere care ar trebui folosite la citare. Iată un exemplu:
q {
quotes: '“' '”' '‘' '’' '“' '”';
}
Acestea sunt seturi de citate. Primul set va fi utilizat pentru nivelul superior al ghilimelelor. Al doilea set va fi utilizat pentru primul citat imbricat. Iar al treilea set va fi folosit pentru al doilea citat imbricat. Și așa mai departe, dacă ar fi incluse mai multe seturi.
Acum că înțelegem quotes
proprietate, pot explica modul în care no-open-quote
și no-close-quote
proprietățile funcționează.
Pentru fiecare nivel al ghilimelelor, putem atribui seturi diferite de caractere de utilizat pentru ghilimele. Prin specificarea locului în care o ofertă nu ar trebui să fie în continuare crește sau scade nivelul de cuibărire la care se face referire din quotes
proprietate.
Aruncați o privire la exemplul de mai jos. Veți vedea că al doilea nivel al ghilimelelor este omis.
Atribute
Atributele pot fi folosite pentru a transmite conținut din HTML în CSS content
proprietate. De fapt, am folosit acest lucru deja în exemplul de link unde am folosit href
atribut pentru a include șirul URL ca parte a conținutului nostru.
Un caz de utilizare perfect pentru aceasta este o descriere. Puteți adăuga un title
atribuie unui element din HTML pentru a avea un cursor simplu, încorporat pe hover. Dar pentru a personaliza acest lucru, putem folosi un atribut de date pe eticheta noastră HTML și apoi să utilizăm content
proprietate pentru a adăuga un tooltip.
În acest exemplu, folosim atributul data-tooltip
din elementul nostru HTML pentru a transmite valoarea în sfatul nostru. Pentru indicatorul indicativului, setăm fișierul content
la ""
, la fel de content
este necesar pentru a reda un ::before
sau ::after
pseudo-element.
Contoare
counter()
Funcția CSS returnează un șir care reprezintă valoarea curentă a contorului numit. În exemplul următor avem o listă ordonată pe care o vom adăuga conținut folosind un counter
.
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ol {
counter-reset: exampleCounter;
}
li {
counter-increment: exampleCounter;
}
li::after {
content: "[" counter(exampleCounter) "] == ["
counter(exampleCounter, upper-roman) "]";
}
Fără a intra prea în profunzime asupra counter
funcție, trebuie să inițiem mai întâi contorul pe ol
element. Putem numi acest lucru oricum ne-am dori. Apoi îi spunem contorului să crească pe fiecare li
element. Și, în sfârșit, am setat content
din li::after
.
Iată rezultatul:

Puteți utiliza acest lucru pentru a personaliza conținutul din fiecare articol din listă care are nevoie de un număr corespunzător. Sau puteți utiliza acest lucru pentru a personaliza elementul de listă în sine. De exemplu, puteți elimina numerotarea implicită și puteți implementa un sistem de numerotare personalizat.
Imagini
Imaginile și gradientele pot fi utilizate cu content
proprietate. Acest lucru este destul de simplu. Iată un exemplu care folosește ambele:
Pentru accesibilitate, există și o opțiune de a adăuga text alternativ pentru imagine. Această caracteristică nu este însă pe deplin acceptată.
content: url(//unsplash.it/200/200) / "Alternative Text Here";
Notă: Acest lucru nu este acceptat în Firefox, IE și Safari. De asemenea, gradientul nu funcționează în Firefox.
În afara elementelor Pseudo
Asta e corect! Puteți utiliza content
proprietate în afara pseudo-elementelor ::before
și ::after
. Deși, utilizarea sa este limitată și nu este pe deplin compatibilă în toate browserele.
Cel mai compatibil caz de utilizare ar fi înlocuirea unui element.
<div id='replace'>
codeSTACKr
</div>
#replace {
content: url("<https://www.codestackr.com/logo_twoline_light.svg>");
width: 100%;
}
Notă: Înlocuirea nu este acceptată în IE.
Concluzie
De cele mai multe ori vei vedea content: ""
găsit în ::before
și ::after
pseudo-elemente. Cu exceptia content
proprietatea are multe aplicații utile.
În opinia mea, cea mai bună utilizare este să o utilizați pentru actualizarea elementelor în bloc. Dacă doriți să adăugați o pictogramă înainte de fiecare link de pe site-ul dvs., ar fi mult mai ușor să o adăugați prin intermediul content
decât să o adăugați la fiecare element din documentul HTML.
Mulțumesc pentru lectură!
Vă mulțumim că ați citit acest articol. Sperăm că v-a ajutat să înțelegeți mai bine cum content
proprietatea funcționează în CSS.
Sunt Jesse din Texas. Verificați celălalt conținut al meu și anunțați-mă cum vă pot ajuta în călătoria dvs. de a deveni dezvoltator web.
- Abonați-vă la YouTube-ul meu
-
Spune buna!
Instagram |
Stare de nervozitate - Înscrieți-vă la Newsletter-ul meu