{"id":91315,"date":"2022-10-11T17:31:34","date_gmt":"2022-10-11T22:31:34","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-anvander-fore-och-efter-pseudoelement-i-css\/"},"modified":"2022-10-11T17:31:34","modified_gmt":"2022-10-11T22:31:34","slug":"hur-man-anvander-fore-och-efter-pseudoelement-i-css","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-anvander-fore-och-efter-pseudoelement-i-css\/","title":{"rendered":"Hur man anv\u00e4nder f\u00f6re och efter pseudoelement i CSS"},"content":{"rendered":"
\n

Pseudo-element \u00e4r en av de mer avancerade v\u00e4ljare som finns tillg\u00e4ngliga f\u00f6r anv\u00e4ndning i CSS. Huvudsyftet bakom dessa v\u00e4ljare \u00e4r att skapa unik stil, utan att \u00e4ndra HTML-dokumentet som anv\u00e4nds f\u00f6r att skapa den grundl\u00e4ggande strukturen f\u00f6r en given webbsida.<\/p>\n

S\u00e5 h\u00e4r anv\u00e4nder du pseudoelement i CSS.<\/p>\n

<\/span> Vanliga Pseudo-element<\/span><\/h2>\n

Det finns en omfattande lista \u00f6ver pseudo-element som \u00e4r tillg\u00e4ngliga f\u00f6r att g\u00f6ra livet f\u00f6r en webbutvecklare enklare. N\u00e5gra av dessa pseudoelement inkluderar:<\/p>\n

F\u00f6re Efter Bakgrund F\u00f6rsta raden F\u00f6rsta bokstaven <\/p>\n

I specifika situationer kommer vissa pseudoelement att visa sig vara mer l\u00e4mpliga \u00e4n andra, men det enda som f\u00f6rblir konstant \u00e4r den allm\u00e4nna strukturen f\u00f6r att anv\u00e4nda vilket pseudoelement som helst.<\/p>\n

<\/span> Pseudoelement Strukturexempel<\/span><\/h2>\n
selector::pseudo-element{\/* css code *\/} <\/pre>\n
\u00c4ven om du kan anv\u00e4nda ett HTML-element som en v\u00e4ljare, rekommenderas det att du anv\u00e4nder en klass eller ett id f\u00f6r att undvika att rikta in sig p\u00e5 oavsiktliga element i din layout.  Elementet, stilen eller data som du vill infoga p\u00e5 \u00f6nskad position ska placeras mellan de lockiga h\u00e4ngslen.<\/p>\n
Pseudoelementen f\u00f6re och efter \u00e4r de mest popul\u00e4ra i listan, och med tanke p\u00e5 att det finns m\u00e5nga praktiska s\u00e4tt att anv\u00e4nda dem \u2013 \u00e4r det inte sv\u00e5rt att f\u00f6rst\u00e5 varf\u00f6r.<\/p>\n
<\/span>  Anv\u00e4nder Before Pseudo-elementet i CSS<\/span><\/h2>\n
\u00c4ven om det inte \u00e4r om\u00f6jligt, \u00e4r det sv\u00e5rt att l\u00e4gga \u00f6ver bilder med l\u00e4sbar text i CSS.  Detta beror mest p\u00e5 att bilden och texten skulle ha samma position p\u00e5 en webbsida.<\/p>\n
Det \u00e4r relativt enkelt att skicka en bild till bakgrunden av en grupp text, men n\u00e4r bilden \u00e4r f\u00f6r ljus tenderar den att \u00f6verv\u00e4ldiga texten som ligger ovanp\u00e5 den.  I dessa fall \u00e4r n\u00e4sta steg att f\u00f6rs\u00f6ka g\u00f6ra bilden mindre ogenomskinlig med hj\u00e4lp av opacitetsegenskapen.<\/p>\n
Det enda problemet \u00e4r att eftersom bilden och texten har samma position blir texten ocks\u00e5 n\u00e5got transparent.<\/p>\n
Ett av de f\u00e5 effektiva s\u00e4tten att l\u00f6sa detta problem \u00e4r att anv\u00e4nda f\u00f6re pseudo-elementet.<\/p>\n
<\/span>Anv\u00e4nda f\u00f6re-pseudoelementexemplet<\/span><\/h3>\n
.landingPage{\/* Arranges the text on the image overlay *\/display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;\/*sets the page to adjust to different screen sizes*\/height: 100vh;}.landingPage::before{content:'';\/*imports an image*\/background: url(https:\/\/source.unsplash.com\/_1EYIHRG014\/1600x900)no-repeat center\/cover;\/*places an overlay on top of the image*\/opacity: 0.4;\/*makes the image visible*\/position: absolute;top: 0;left: 0;width: 100%;height: 100%;}<\/pre>\n
Koden ovan \u00e4r skapad f\u00f6r att anv\u00e4ndas tillsammans med HTML landingPage-klassen nedan.  Som visas i koden ovan kan vi genom att anv\u00e4nda before pseudo-elementet rikta in bilden och anv\u00e4nda opacitetsegenskapen p\u00e5 den innan bilden kombineras med texten.<\/p>\n
<div class=\"landingPage\"><h1>Using the Before pseudo-element<\/h1><p>This is the result of using the before pseudo-elementto overlay and image with readable text.<\/p><\/div> <\/pre>\n
Detta kommer att resultera i att en \u00f6verlagring placeras p\u00e5 bilden och tydlig text visas ovanp\u00e5, som visas i bilden nedan:<\/p>\n
\n<\/figure>\n
<\/span>  Anv\u00e4nder After Pseudo-elementet i CSS<\/span><\/h2>\n
En praktisk anv\u00e4ndning f\u00f6r efter-pseudo-elementet \u00e4r att hj\u00e4lpa till med att skapa ett HTML-formul\u00e4r.  De flesta formul\u00e4r skapas med en upps\u00e4ttning f\u00e4lt som kr\u00e4ver data f\u00f6r att formul\u00e4ret ska kunna skickas.<\/p>\n
Ett s\u00e4tt att indikera att ett f\u00e4lt i ett formul\u00e4r kr\u00e4ver data \u00e4r att placera en asterisk efter etiketten f\u00f6r detta f\u00e4lt.  Efter-pseudoelementet ger dig ett praktiskt s\u00e4tt att g\u00f6ra detta.<\/p>\n
<\/span>Anv\u00e4nda After Pseudo-elementexemplet<\/span><\/h3>\n
.required::after{content: '*';color: red;} <\/pre>\n
Om du infogar koden ovan i CSS-delen av ditt formul\u00e4r s\u00e4kerst\u00e4lls att varje etikett som inneh\u00e5ller den obligatoriska klassen kommer att f\u00f6ljas direkt av en r\u00f6d asterisk.  Efter-pseudo-elementet \u00e4r ocks\u00e5 praktiskt i det h\u00e4r exemplet eftersom det hj\u00e4lper till att separera styling fr\u00e5n struktur (vilket alltid \u00e4r idealiskt vid mjukvaruutveckling.)<\/p>\n
<\/span>  Inneh\u00e5llsegenskapen<\/span><\/h2>\n
Som visas i exemplet efter pseudoelement ovan, \u00e4r inneh\u00e5llsegenskapen verktyget som anv\u00e4nds f\u00f6r att infoga nytt inneh\u00e5ll p\u00e5 en webbsida.  Den h\u00e4r egenskapen anv\u00e4nds endast med f\u00f6re och efter pseudoelement.<\/p>\n
Det \u00e4r viktigt att notera att \u00e4ven om det inte finns n\u00e5got tillg\u00e4ngligt inneh\u00e5ll f\u00f6r att matas till inneh\u00e5llsegenskapen (som i exemplet f\u00f6re pseudoelement ovan), m\u00e5ste du fortfarande anv\u00e4nda inneh\u00e5llsegenskapen inom parametrarna f\u00f6r f\u00f6re eller efter pseudo-element f\u00f6r att f\u00e5 dem att fungera som avsett.<\/p>\n
<\/span>  Nu kan du anv\u00e4nda Pseudo-element i CSS<\/span><\/h2>\n
I den h\u00e4r artikeln l\u00e4rde du dig hur du identifierar och anv\u00e4nde pseudoelement i dina CSS-program.  Du introducerades till f\u00f6re och efter pseudo-element och fick praktiska s\u00e4tt att anv\u00e4nda b\u00e5da.  Du kunde ocks\u00e5 se varf\u00f6r inneh\u00e5llsegenskapen \u00e4r n\u00f6dv\u00e4ndig f\u00f6r framg\u00e5ngsrik anv\u00e4ndning av f\u00f6re och efter pseudo-elementen.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Kadeisha Kean (39 artiklar publicerade)
<\/strong><\/p>\n
Kadeisha Kean \u00e4r en full-stack mjukvaruutvecklare och teknisk\/teknikskribent.  Hon har den distinkta f\u00f6rm\u00e5gan att f\u00f6renkla n\u00e5gra av de mest komplexa tekniska koncepten;  producera material som l\u00e4tt kan f\u00f6rst\u00e5s av alla nyb\u00f6rjare.  Hon brinner f\u00f6r att skriva, utveckla intressant programvara och att resa runt i v\u00e4rlden (genom dokument\u00e4rer).<\/p>\n
                            Mer fr\u00e5n Kadeisha Kean<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n