Pseudo-element är en av de mer avancerade väljare som finns tillgängliga för användning i CSS. Huvudsyftet bakom dessa väljare är att skapa unik stil, utan att ändra HTML-dokumentet som används för att skapa den grundläggande strukturen för en given webbsida.
Så här använder du pseudoelement i CSS.
Vanliga Pseudo-element
Det finns en omfattande lista över pseudo-element som är tillgängliga för att göra livet för en webbutvecklare enklare. Några av dessa pseudoelement inkluderar:
Före Efter Bakgrund Första raden Första bokstaven
I specifika situationer kommer vissa pseudoelement att visa sig vara mer lämpliga än andra, men det enda som förblir konstant är den allmänna strukturen för att använda vilket pseudoelement som helst.
Pseudoelement Strukturexempel
selector::pseudo-element{
/* css code */
}
Även om du kan använda ett HTML-element som en väljare, rekommenderas det att du använder en klass eller ett id för att undvika att rikta in sig på oavsiktliga element i din layout. Elementet, stilen eller data som du vill infoga på önskad position ska placeras mellan de lockiga hängslen.
Pseudoelementen före och efter är de mest populära i listan, och med tanke på att det finns många praktiska sätt att använda dem – är det inte svårt att förstå varför.
Använder Before Pseudo-elementet i CSS
Även om det inte är omöjligt, är det svårt att lägga över bilder med läsbar text i CSS. Detta beror mest på att bilden och texten skulle ha samma position på en webbsida.
Det är relativt enkelt att skicka en bild till bakgrunden av en grupp text, men när bilden är för ljus tenderar den att överväldiga texten som ligger ovanpå den. I dessa fall är nästa steg att försöka göra bilden mindre ogenomskinlig med hjälp av opacitetsegenskapen.
Det enda problemet är att eftersom bilden och texten har samma position blir texten också något transparent.
Ett av de få effektiva sätten att lösa detta problem är att använda före pseudo-elementet.
Använda före-pseudoelementexemplet
.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%;
}
Koden ovan är skapad för att användas tillsammans med HTML landingPage-klassen nedan. Som visas i koden ovan kan vi genom att använda before pseudo-elementet rikta in bilden och använda opacitetsegenskapen på den innan bilden kombineras med texten.
<div class="landingPage">
<h1>Using the Before pseudo-element</h1>
<p>
This is the result of using the before pseudo-element
to overlay and image with readable text.
</p>
</div>
Detta kommer att resultera i att en överlagring placeras på bilden och tydlig text visas ovanpå, som visas i bilden nedan:
Använder After Pseudo-elementet i CSS
En praktisk användning för efter-pseudo-elementet är att hjälpa till med att skapa ett HTML-formulär. De flesta formulär skapas med en uppsättning fält som kräver data för att formuläret ska kunna skickas.
Ett sätt att indikera att ett fält i ett formulär kräver data är att placera en asterisk efter etiketten för detta fält. Efter-pseudoelementet ger dig ett praktiskt sätt att göra detta.
Använda After Pseudo-elementexemplet
.required::after{
content: '*';
color: red;
}
Om du infogar koden ovan i CSS-delen av ditt formulär säkerställs att varje etikett som innehåller den obligatoriska klassen kommer att följas direkt av en röd asterisk. Efter-pseudo-elementet är också praktiskt i det här exemplet eftersom det hjälper till att separera styling från struktur (vilket alltid är idealiskt vid mjukvaruutveckling.)
Innehållsegenskapen
Som visas i exemplet efter pseudoelement ovan, är innehållsegenskapen verktyget som används för att infoga nytt innehåll på en webbsida. Den här egenskapen används endast med före och efter pseudoelement.
Det är viktigt att notera att även om det inte finns något tillgängligt innehåll för att matas till innehållsegenskapen (som i exemplet före pseudoelement ovan), måste du fortfarande använda innehållsegenskapen inom parametrarna för före eller efter pseudo-element för att få dem att fungera som avsett.
Nu kan du använda Pseudo-element i CSS
I den här artikeln lärde du dig hur du identifierar och använde pseudoelement i dina CSS-program. Du introducerades till före och efter pseudo-element och fick praktiska sätt att använda båda. Du kunde också se varför innehållsegenskapen är nödvändig för framgångsrik användning av före och efter pseudo-elementen.
Om författaren
Kadeisha Kean (39 artiklar publicerade)
Kadeisha Kean är en full-stack mjukvaruutvecklare och teknisk/teknikskribent. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska koncepten; producera material som lätt kan förstås av alla nybörjare. Hon brinner för att skriva, utveckla intressant programvara och att resa runt i världen (genom dokumentärer).
Mer från Kadeisha Kean
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
