Förstå Pseudo-Element före och efter

Cascading Style Sheet (CSS) är i första hand avsedd för att tillämpa stilar på HTML-markupen, men i vissa fall när man lägger till extra markering i dokumentet är överflödig eller inte, finns det faktiskt en funktion i CSS som tillåter oss att lägga till extra markup utan att störa det faktiska dokumentet, nämligen pseudo-element.

Du har hört talas om denna term, speciellt när du har följt några av våra handledning.

Det finns faktiskt några CSS-familjemedlemmar som är klassificerade som pseudo-element så som :Första linjen, :första bokstaven, ::urval, :innan och :efter. Men för denna artikel kommer vi att begränsa vår täckning till endast :innan och :efter, “pseudo-element” här kommer specifikt att hänvisa till dem båda. Vi kommer att undersöka detta ämne från grunderna.

Syntax och Browser Support

De pseudo-element har faktiskt funnits sedan CSS1, men :innan och :efter som vi diskuterar här släpptes i CSS2.1. I början, den pseudo-element använd enkelkolon för syntaxen, då webben utvecklades, i CSS3 the pseudo-element reviderades för att använda dubbel-kolon - att bli ::innan & ::efter - för att skilja det med pseudo-klasser (d.v.s.. :sväva, :aktiva, och så vidare).

Om du ändå använder singel-kolon eller dubbelt kolonformat, kommer webbläsarna fortfarande att känna igen. Och eftersom Internet Explorer 8 endast stöder single-colon-formatet är det säkrare att använda enkelkolonnen om du vill ha större webbläsarkompatibilitet.

Vad gör det?

Kort sagt, pseudo-element kommer att infoga ett extra element innan eller efter innehållets element, så när vi lägger till dem båda är de tekniskt lika med följande markup.

:innan Detta huvudinnehåll. :efter

Men de här elementen genereras inte på dokumentet. De är fortfarande synliga på ytan men du hittar dem inte på dokumentkällan, så praktiskt taget är de falsk element.

Använda pseudo-element

Använder sig av pseudo-element är relativt lätt; följande syntax väljare: före kommer att lägga till ett element innan innehållets väljare medan denna syntax väljaren: efter lägger till efter det, och för att lägga till ett innehåll inom dem kan vi använda innehåll fast egendom.

Till exempel lägger du till ett citatmärke före och efter Block citat.

 blockquote: före innehåll: öppet citat;  blockquote: efter innehåll: close quote;

Styling pseudo-element

Trots att det är ett falskt element, pseudo-element faktiskt agera som a “verklig” element; vi kan lägga till några stilar deklaration på dem, till exempel ändra färg, lägga till bakgrund, justera typsnittstorleken, anpassa texten inuti den och så vidare.

 blockquote: före innehåll: öppet citat; typsnittstorlek: 24pt; text-align: center; linjehöjd: 42px; färg: #fff; bakgrund: #ddd; flyta till vänster; position: relativ; topp: 30px;  blockquote: efter innehåll: close quote; typsnittstorlek: 24pt; text-align: center; linjehöjd: 42px; färg: #fff; bakgrund: #ddd; float: right; position: relativ; botten: 40px;

Specificerar dimensionen

De genererade elementen är som standard ett inline-nivåelement, så när vi ska ange höjd och bredd måste vi först definiera den som ett blockelement med hjälp av display: block deklaration.

 blockquote: före innehåll: öppet citat; typsnittstorlek: 24pt; text-align: center; linjehöjd: 42px; färg: #fff; bakgrund: #ddd; flyta till vänster; position: relativ; topp: 30px; gränslinjen: 25px; / ** definiera det som ett blockelement ** / display: block; höjd: 25px; bredd: 25px;  blockquote: efter innehåll: close quote; typsnittstorlek: 24pt; text-align: center; linjehöjd: 42px; färg: #fff; bakgrund: #ddd; float: right; position: relativ; botten: 40px; gränslinjen: 25px; / ** definiera det som ett blockelement ** / display: block; höjd: 25px; bredd: 25px;

Bifoga bakgrundsbild

Vi kan också ersätta innehållet med en bild i stället för enbart vanlig text. Även om innehåll egendom ger en url () sträng för att infoga en bild, men i de flesta fall föredrar jag mycket att använda bakgrund egendom för mer kontroll över den bifogade bilden.

 blockquote: före innehåll: ""; typsnittstorlek: 24pt; text-align: center; linjehöjd: 42px; färg: #fff; flyta till vänster; position: relativ; topp: 30px; gränslinjen: 25px; bakgrund: url (bilder / quotationmark.png) -3px -3px #ddd; display: block; höjd: 25px; bredd: 25px;  blockquote: efter innehåll: ""; typsnittstorlek: 24pt; text-align: center; linjehöjd: 42px; färg: #fff; float: right; position: relativ; botten: 40px; gränslinjen: 25px; bakgrund: url (bilder / quotationmark.png) -1px -32px #ddd; display: block; höjd: 25px; bredd: 25px;

Men som du kan se från utgåvan ovan, förklarar vi fortfarande innehåll egendom och den här gången med en tom sträng. De innehåll egendom är ett krav och bör alltid tillämpas annars pseudo-elementet kommer inte att fungera helst.

Kombinera med pseudoklasser

Även om de är en annan typ av pseudo, vi kan använda pseudo-klasser tillsammans med pseudo-element tillsammans i en CSS-regel, till exempel om vi vill vända citationstecken bakgrund lite mörkare när vi svävar över Block citat.

 blockquote: svep: efter, blockquote: svep: före bakgrundsfärg: # 555;

Lägga till övergångseffekt

Och vi kan till och med tillämpa övergång egendom på dem för att skapa en graciös färgövergångseffekt.

 övergång: alla 350ms; -övergång: alla 350ms; -moz-övergång: alla 350ms; -webkit-övergång: alla 350ms;

Tyvärr verkar övergångseffekten bara fungera i den senaste versionen av Firefox. Förhoppningsvis kommer fler webbläsare att komma in för att tillåta övergångsegenskapen att tillämpas i pseudo-element i framtiden.

demo
Hämta källa

Mer inspiration

För att inspirera dig har vi valt tre coola exempel som kan ge dig idéer för din webbdesign.

Fascinerande skuggor

I denna handledning förklarade Paul Underwood hur man skapar en mer realistisk och fascinerande skugg effekt med :innan och :efter pseudo-element. Båda är placerade absolut och placeras längst bak med negativ z-index värde.

Staplad bildeffekt

Använda pseudo-element för att skapa en rörig staplad bildeffekt bara med en enda bild på markeringen är också möjligt. De pseudo-element används för att skapa en illusion av de staplade bilderna på baksidan av den faktiska bilden med hjälp av negativa z-index.

Slutsats

Pseudo element är helt enkelt “Häftigt” och i slutändan användbar, i princip har vi två bonuselement för varje element vi lägger till utan att störa själva HTML-strukturen alls och sedan ändra dem till nästan allt vi någonsin kan föreställa oss.

Det finns faktiskt lite förbättring för pseudo-element som för närvarande jobbar på, till exempel nestande pseudo-element div :: före :: före innehåll: "; och flera pseudo-element div :: före (3) innehåll: "; vilket uppenbarligen kommer att öppna många fler möjligheter i webbdesign praktiken i framtiden. Medan de implementeras i nuvarande webbläsare, låt oss vänta tålmodigt för nu.