Înțelegerea pseudo-elementului înainte și după

Caseta de stil cascadă (CSS) este destinată în primul rând aplicării stilurilor în marcajul HTML, însă în unele cazuri când adăugarea de marcaje suplimentare în document este redundantă sau nu este posibilă, există în fapt o caracteristică în CSS care ne permite să adăugăm marcare suplimentară fără a perturba documentul actual, și anume pseudo-elementele.

Ați auzit de acest termen, mai ales când ați urmat câteva dintre tutorialele noastre.

Există de fapt câțiva membri ai familiei CSS care sunt clasificați ca pseudo-elementele la fel ca :prima linie, :prima literă, ::selecţie, :inainte de și :după. Dar, pentru acest articol, vom limita acoperirea noastră numai la :inainte de și :după, “pseudo-elementele” aici se vor referi în mod specific la ambele. Vom examina acest subiect special din elementele de bază.

Sintaxa și suport pentru browser

pseudo-elementele au fost de fapt în jur de atunci CSS1, cu exceptia :inainte de și :după despre care discutăm aici au fost lansate CSS2.1. La început, pseudo-elementele utilizați un singur punct pentru sintaxa, apoi după ce a evoluat webul, în CSS3 pseudo-elementele au fost revizuite pentru a utiliza dublu-colon-devenind ::inainte de & ::după - pentru ao distinge pseudo-clase (adică. :planare, :activ, si asa mai departe).

Cu toate acestea, dacă utilizați format single-colon sau dublu-colon, browserele vor recunoaște în continuare. Din moment ce Internet Explorer 8 acceptă numai formatul cu un singur colon, este mai sigur să utilizați codul unic dacă doriți compatibilitate mai largă a browserului.

Ce face?

Pe scurt, pseudo-elementele va introduce un element suplimentar inainte de sau după elementul conținutului, deci când le adăugăm amândouă, ele sunt egale din punct de vedere tehnic, cu următoarea marcare.

:inainte de Acest conținut principal. :după

Dar aceste elemente nu sunt generate de document. Ele sunt încă vizibile la suprafață, dar nu le veți găsi pe sursa de documente, așa că practic vorbind acestea sunt fals element.

Utilizarea pseudo-elementelor

Utilizarea pseudo-elementele este relativ ușor; următoarea sintaxă Selector: înainte va adăuga un element inainte de selectorul conținutului în timp ce această sintaxă Selector: după va adăuga după ea, și pentru a adăuga un conținut în interiorul lor putem folosi conţinut proprietate.

De exemplu, fragmentul de mai jos va adăuga un ghilimele înainte și după blockquote.

 blocaj: înainte de conținut: ofertă deschisă;  blockquote: după content: close-quote;

Pseudo-elemente de stil

În ciuda faptului că este un element fals, pseudo-elementele de fapt acționa ca a “real” element; putem adăuga pe acestea orice declarație de stil, cum ar fi schimbarea culorii, adăugarea de fundal, ajustarea dimensiunii fontului, alinierea textului în interiorul acestuia și așa mai departe.

 blocaj: înainte de conținut: ofertă deschisă; font-size: 24pt; text-align: centru; linia-înălțime: 42px; culoare: #fff; fundal: #ddd; plutește la stânga; poziția: relativă; top: 30px;  blockquote: după content: close-quote; font-size: 24pt; text-align: centru; linia-înălțime: 42px; culoare: #fff; fundal: #ddd; float: dreapta; poziția: relativă; fund: 40px;

Specificarea dimensiunii

Elementele generate sunt, în mod implicit, un element de nivel inline, astfel că atunci când intenționăm să specificăm înălțimea și lățimea, trebuie să o definim mai întâi ca un element bloc utilizând afișare: blocare declaraţie.

 blocaj: înainte de conținut: ofertă deschisă; font-size: 24pt; text-align: centru; linia-înălțime: 42px; culoare: #fff; fundal: #ddd; plutește la stânga; poziția: relativă; top: 30px; raza de graniță: 25px; / ** definește-o ca un element bloc ** / display: block; înălțime: 25px; lățime: 25px;  blockquote: după content: close-quote; font-size: 24pt; text-align: centru; linia-înălțime: 42px; culoare: #fff; fundal: #ddd; float: dreapta; poziția: relativă; fund: 40px; raza de graniță: 25px; / ** definește-o ca un element bloc ** / display: block; înălțime: 25px; lățime: 25px;

Atașați imaginea de fundal

De asemenea, putem înlocui conținutul cu o imagine mai degrabă decât cu text simplu. desi conţinut proprietate oferă o URL-ul () string pentru a insera o imagine, dar in cele mai multe cazuri prefer sa folosesc fundal pentru mai mult control asupra imaginii atașate.

 blockquote: înainte de content: ""; font-size: 24pt; text-align: centru; linia-înălțime: 42px; culoare: #fff; plutește la stânga; poziția: relativă; top: 30px; raza de graniță: 25px; fundal: url (imagini / quotationmark.png) -3px -3px #ddd; afișare: bloc; înălțime: 25px; lățime: 25px;  blockquote: după content: ""; font-size: 24pt; text-align: centru; linia-înălțime: 42px; culoare: #fff; float: dreapta; poziția: relativă; fund: 40px; raza de graniță: 25px; fundal: url (imagini / quotationmark.png) -1px -32px #ddd; afișare: bloc; înălțime: 25px; lățime: 25px;

Cu toate acestea, după cum puteți vedea din fragmentul de mai sus, declarăm încă conţinut proprietate și de data aceasta cu un șir gol. conţinut proprietatea este o cerere și ar trebui să fie întotdeauna aplicate; în caz contrar pseudo-element de nu va funcționa oricare.

Combinând cu pseudo-clase

Deși sunt un fel diferit pseudo, putem folosi pseudo-clase impreuna cu pseudo-elementele împreună într-o regulă CSS, de exemplu, dacă vrem să transformăm fondul de cotație un pic mai inchis atunci cand vom trece peste blockquote.

 blockquote: hover: după, blockquote: hover: înainte de background-color: # 555;

Adăugarea efectului de tranziție

Și putem aplica chiar și tranziție de proprietate asupra lor pentru a crea un efect grațios de tranziție de culoare.

 tranziție: toate cele 350ms; -o-tranziție: toate cele 350ms; -moz-tranziție: toate cele 350ms; -webkit-transition: toate cele 350ms;

Din păcate, însă, efectul de tranziție pare să funcționeze numai în ultima versiune de Firefox. Sperăm că mai multe browsere vor ajunge din urmă pentru a permite aplicarea proprietății de tranziție pseudo-elementele in viitor.

Demo
Descărcați sursa

Mai multă inspirație

Pentru a vă inspira, am ales trei exemple interesante care vă pot oferi idei pentru designul dvs. web.

Umbre fascinante

În acest tutorial, Paul Underwood a explicat cum să creeze un efect de umbră mai realist și mai fascinant :inainte de și :după pseudo-elementele. Ambele sunt poziționate absolut și plasate la spate cu negativ z-index valoare.

Efectul de imagine stacked

Utilizarea funcției pseudo-elementele pentru a crea un efect de imagine stivuit dezordonat doar cu o singură imagine pe marcaj este, de asemenea, posibil. pseudo-elementele este folosit pentru a crea o iluzie a imaginilor stivuite din spatele imaginii reale folosind negativ z-index.

Concluzie

PElemente-seudo este pur și simplu “rece” și în cele din urmă utilizabile, practic avem două elemente bonus pentru fiecare element pe care îl adăugăm fără a interfera cu structura HTML reală, apoi transformându-i în aproape tot ceea ce ne putem imagina vreodată.

Există de fapt unele îmbunătățiri pentru pseudo-elementele la care se lucrează în prezent, cum ar fi cuiburi pseudo-elemente div :: înainte: înainte de content: "; și pseudo-elemente multiple div :: înainte (3) conținut: "; care, evident, va deschide mult mai multe posibilități în practica de web design în viitor. În timp ce acestea sunt puse în aplicare în browserele curente, să așteptăm cu răbdare acum.