Pseudo-după, și înainte și funcția lor în css

Pseudo-dupa ce - probabil crezi că, ca atare, este. Dar, de fapt, este un pseudo. Nu este atât de important să știu, să-mi explice mai bine de ce este nevoie.

: După ce pseudo-creeaza (! Atentie) Pseudo. Realitatea evidentă. Este un element care nu există într-un marcaj HTML. Cu toate acestea, css însuși ne dă posibilitatea de a le crea. In acest scop de: înainte și: după.

Cineva cu limba engleză nu foarte strâns, el știa deja despre semnificația lor. după crearea unui element care va rămâne după elementul este indicat în fața lui. Adică, trebuie să fie legat de orice selector care există în HTML. În sine nu poate fi un pseudo.

Adică, dacă ne prescrie în foaia de stil, după cum urmează:

Este aplicabilă numai toate aceste pseudo, în general. Dar nici unul dintre ele apar pe ecran. Pentru a face acest lucru, trebuie să vă înregistrați, de exemplu:
P: după
Tabel: după
.subsol: după
#header: după

Am explica: în primul exemplu pseudo care apar pentru fiecare paragraf. In al doilea exemplu - fiecare tabel. În următoarea pseudo se află numai elemente având o clasă .footer stil. Varianta a patra - de bloc cu identificator antet.

atunci când sunt utilizate

timp și din nou, folosit-Pseudo. În cazul în care pentru a crea elemente decorative, în cazul în care pentru a crea măști hover, etc. Aici este un exemplu simplu:
Am luat din nou imaginea orașului și setați ca fundal al unității de testare.

Pseudo-după, și înainte și funcția lor în css

Acum, să ne facă astfel încât atunci când mutați-l bloca suprapusă culoare de fundal semi-transparent.

Treceți cu mouse-ul peste imagine și veți vedea cum merge.

Pseudo-după, și înainte și funcția lor în css

În general, pseudo-milioane de aplicații, de obicei este utilizat în conjuncție cu înainte. Aceasta este exact aceeași pseudo-diferențe doamnă el nu, cu excepția cazului în care a fost creat în mod oficial în markup devine înainte de elementul la care se adaugă, mai degrabă decât după aceea, așa cum este cazul cu după.

Pentru a afișa nostru pseudo corect, trebuie să utilizați cele două proprietăți necesare pentru aceasta:
conținut: ''; - proprietate generală creată pentru a introduce unele informații text și afișa pe ecran, dar chiar dacă nu este necesar, este încă necesar să se ceară.
display: block; - ceea ce face blocul nostru mobil, astfel încât să puteți seta dimensiunea pentru ea.

Asta e tot. Desigur, am scris foarte puțin, dar cred că și de la aceasta, este clar de ce sunt necesare aceste elemente. Și dacă înțelegi, atunci va fi capabil să găsească o utilizare pentru ei în construirea site-ul cu ușurință.

Ați putea fi, de asemenea, interesat în