Forstå Pseudo-Element før og etter
Cascading Style Sheet (CSS) er primært ment for å bruke stiler til HTML-oppslaget, men i enkelte tilfeller når du legger til ekstra oppslag til dokumentet, er overflødig eller ikke mulig, er det faktisk en funksjon i CSS som tillater oss å legge til ekstra oppslag uten å forstyrre selve dokumentet, nemlig pseudo-elementer.
Du har hørt om dette begrepet, spesielt når du har fulgt noen av våre opplæringsprogrammer.
Det er faktisk noen CSS familiemedlemmer som er klassifisert som pseudo-elementer slik som :første linje, :første bokstav, :: utvalg, :før og :etter. Men for denne artikkelen vil vi begrense vår dekning til bare :før og :etter, “pseudo-elementer” her vil spesifikt referere til dem begge. Vi vil se på dette emnet fra grunnleggende.
Syntaks- og nettleserstøtten
De pseudo-elementer har faktisk vært rundt siden CSS1, men :før og :etter som vi diskuterer her ble utgitt i CSS2.1. I begynnelsen, den pseudo-elementer bruk single-colon for syntaksen, da som web utviklet seg, i CSS3 the pseudo-elementer ble revidert for å bruke dobbelt-kolon - å bli ::før & ::etter - å skille det med pseudo-klasser (dvs. :sveve, :aktiv, og så videre).
Men om du bruker single-colon eller double-colon-formatet, vil nettleserne likevel gjenkjenne heller. Og siden Internet Explorer 8 bare støtter single-colon-formatet, er det sikrere å bruke single-colon hvis du vil ha bredere nettleserkompatibilitet.
Hva gjør den?
Kort sagt, pseudo-elementer vil sette inn et ekstra element før eller etter innholdets element, så når vi legger til dem begge, er de teknisk likeverdige, med følgende merking.
:før Dette hovedinnholdet. :etter
Men disse elementene blir ikke faktisk generert på dokumentet. De er fortsatt synlige på overflaten, men du finner dem ikke på dokumentkilden, så praktisk sett er de forfalskning elementer.
Bruk av pseudo-elementer
Ved hjelp av pseudo-elementer er relativt enkelt; følgende syntaks Velger: før vil legge til et element før innholdsvelgeren mens denne syntaksen Velger: etter vil legge til etter det, og for å legge til et innhold inni dem kan vi bruke innhold eiendom.
For eksempel vil koden nedenfor legge til et sitatmerke før og etter blockquote.
blockquote: før innhold: open quote; blockquote: etter innhold: close quote;
Styling pseudo-elementer
Til tross for å være et falskt element, pseudo-elementer faktisk fungere som en “ekte” element; Vi kan legge til noen stilerklæringer på dem, for eksempel å endre fargen, legge til bakgrunn, justere skriftstørrelsen, justere teksten i den og så videre.
blockquote: før innhold: open quote; skriftstørrelse: 24pt; tekstjustering: center; linjehøyde: 42px; farge: #fff; bakgrunn: #ddd; flyte: venstre; posisjon: relativ; topp: 30px; blockquote: etter innhold: close quote; skriftstørrelse: 24pt; tekstjustering: center; linjehøyde: 42px; farge: #fff; bakgrunn: #ddd; flyte: høyre; posisjon: relativ; bunn: 40px;
Angir dimensjonen
De genererte elementene er som standard et inline-nivåelement, så når vi skal angi høyde og bredde, må vi først definere det som et blokkelement ved hjelp av skjerm: blokk erklæring.
blockquote: før innhold: open quote; skriftstørrelse: 24pt; tekstjustering: center; linjehøyde: 42px; farge: #fff; bakgrunn: #ddd; flyte: venstre; posisjon: relativ; topp: 30px; border-radius: 25px; / ** definer det som et blokkelement ** / display: block; høyde: 25px; bredde: 25px; blockquote: etter innhold: close quote; skriftstørrelse: 24pt; tekstjustering: center; linjehøyde: 42px; farge: #fff; bakgrunn: #ddd; flyte: høyre; posisjon: relativ; bunn: 40px; border-radius: 25px; / ** definer det som et blokkelement ** / display: block; høyde: 25px; bredde: 25px;
Fest bakgrunnsbilde
Vi kan også erstatte innholdet med et bilde i stedet for bare ren tekst. Selv om innhold eiendom gir en url () streng for å sette inn et bilde, men i de fleste tilfeller foretrekker jeg mye å bruke bakgrunn eiendom for mer kontroll over bildet vedlagt.
blockquote: før innhold: ""; skriftstørrelse: 24pt; tekstjustering: center; linjehøyde: 42px; farge: #fff; flyte: venstre; posisjon: relativ; topp: 30px; border-radius: 25px; bakgrunn: url (images / quotationmark.png) -3px -3px #ddd; skjerm: blokk; høyde: 25px; bredde: 25px; blockquote: etter content: ""; skriftstørrelse: 24pt; tekstjustering: center; linjehøyde: 42px; farge: #fff; flyte: høyre; posisjon: relativ; bunn: 40px; border-radius: 25px; bakgrunn: url (images / quotationmark.png) -1px -32px #ddd; skjerm: blokk; høyde: 25px; bredde: 25px;
Men som du kan se fra koden ovenfor, erklærer vi fortsatt innhold eiendom og denne gangen med en tom streng. De innhold eiendommen er et krav og bør alltid brukes ellers pseudo-element vil ikke fungere overhodet.
Kombinere med pseudoklasser
Selv om de er en annen slags pseudo, vi kan bruke pseudo-klasser sammen med pseudo-elementer sammen i en CSS-regel, for eksempel hvis vi ønsker å snu sitatmerke bakgrunn litt mørkere når vi svinger over blockquote.
blockquote: hover: after, blockquote: svever: før bakgrunnsfargen: # 555;
Legge til overgangseffekt
Og vi kan til og med søke på overgang eiendom på dem for å skape en grasiøs fargeovergangseffekt.
overgang: alle 350ms; -Overgang: alle 350ms; -moz-overgang: alle 350ms; -webkit-overgang: alle 350ms;
Dessverre synes overgangseffekten bare å fungere i den nyeste versjonen av Firefox. Forhåpentligvis vil flere nettlesere komme opp for å la overgangseiendommen bli brukt i pseudo-elementer i fremtiden.
- Demo
- Last ned kilde
Mer inspirasjon
For å inspirere deg har vi valgt tre flotte eksempler som kan gi deg ideer til ditt webdesign.
Fascinerende skygger
I denne veiledningen forklarte Paul Underwood hvordan man lager en mer realistisk og fascinerende skyggeeffekt ved hjelp av :før og :etter pseudo-elementer. Begge er plassert helt og plassert helt bak med negativ z-indeks verdi.
Stacked Image Effect
Bruker pseudo-elementer for å opprette en rotete stablet bildeeffekt bare med et enkelt bilde på markeringen er også mulig. De pseudo-elementer brukes til å lage en illusjon av de stablede bildene på baksiden av selve bildet ved hjelp av negativ z-indeks.
Konklusjon
Pseudo elementer er ganske enkelt “kul” og til slutt brukbare, i utgangspunktet har vi to bonuselementer for hvert element legger vi til uten å forstyrre den faktiske HTML-strukturen i det hele tatt, og deretter gjøre dem til nesten alt vi kan forestille oss.
Det er faktisk noen forbedringer for pseudo-elementer som for tiden blir jobbet på, for eksempel nesting pseudo-elementer div :: før :: før innhold: "; og flere pseudo-elementer div :: før (3) innhold: "; som åpenbart vil åpne mange flere muligheter i webdesign praksis i fremtiden. Mens de implementeres i nåværende nettlesere, la oss vente tålmodig for nå.
