CSS Before și CSS After – Cum se utilizează proprietatea de conținut

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ă la none 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 folosind url() sau linear-gradient().
• open-quote | close-quote: Setează conținutul la caracterul citat corespunzător la care se face referire din quotes 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 din quotes proprietate.
• attr(*attribute*): Setează conținutul ca valoare șir a atributului selectat pentru elementele selectate.
• counter(): Setează conținutul ca valoare a counter, 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