Pseudo-element är en av de mer avancerade väljare som är tillgängliga för användning i CSS. Huvudsyftet med dessa väljare är att skapa unik styling utan att ändra HTML-dokumentet som används för att skapa grundstrukturen på en viss webbsida.

Så här använder du pseudo-element i CSS.

Vanliga Pseudo-element

Det finns en omfattande lista över pseudoelement som är tillgängliga för att underlätta för en webbutvecklare. Några av dessa pseudoelement inkluderar:

• Innan
• Efter
• Bakgrund
• Första linjen
• 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 valfritt pseudoelement.

Pseudo-element Struktur Exempel

väljare:: pseudo-element {
/ * css-kod * /
} 

Även om du kan använd ett HTML-element som väljarerekommenderas att du använder en klass eller ett id för att undvika att rikta in dig på oavsiktliga element i din layout. Elementet, stilen eller data som du vill infoga på önskad position ska placeras mellan de lockiga hakparenteserna.

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 - det är inte svårt att se varför.

Använda Före 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 främst på att bilden och texten skulle inta samma position på en webbsida.

Det är relativt lätt att skicka en bild till bakgrunden av en grupp text, men när bilden är för ljus tenderar den att överväldiga texten 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 intar samma position blir texten också något transparent.

Ett av de få effektiva sätten att lösa detta problem är att använda det tidigare pseudo-elementet.

Använda exemplet före Pseudo-element

.landningssida{
/ * Ordnar texten i bildöverlägget * /
display: flex;
flexriktning: kolumn;
justify-content: center;
align-items: center;
textjustera: centrum;
/ * ställer in sidan så att den anpassar sig till olika skärmstorlekar * /
höjd: 100vh;
}
.landingPage:: före {
innehåll:'';
/ * importerar en bild * /
bakgrund: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center / lock;
/ * placerar ett överlägg ovanpå bilden * /
opacitet: 0,4;
/ * gör bilden synlig * /
position: absolut;
topp: 0;
vänster: 0;
bredd: 100%;
höjd: 100%;
}

Koden ovan är skapad för att användas tillsammans med HTML landingPage-klassen nedan. Som visas i koden ovan kan vi använda det före pseudoelementet och rikta in bilden och använda opacitetsegenskapen på den innan bilden kombineras med texten.

Använda Före pseudo-elementet


Detta är resultatet av att använda det tidigare pseudoelementet
för att lägga över och bild med läsbar text.

Detta kommer att resultera i att ett överlägg läggs på bilden och tydlig text visas ovanpå, som visas i bilden nedan:

Använda After Pseudo-elementet i CSS

En praktisk användning för efter-pseudoelementet är att hjälpa till att skapa en HTML-form. De flesta formulär skapas med en uppsättning fält som kräver data för att formuläret ska skickas framgångsrikt.

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. After pseudo-elementet är ett praktiskt sätt för dig att göra detta.

Använda exemplet After Pseudo-element

.krav:: efter {
innehåll: '*';
färgen röd;
} 

Om du sätter in koden ovan i CSS-avsnittet i ditt formulär kommer du att säkerställa att varje etikett som innehåller den önskade klassen följs direkt av en röd asterisk. After pseudo-elementet är också praktiskt i det här exemplet eftersom det hjälper till att separera styling från struktur (vilket alltid är perfekt vid mjukvaruutveckling.)

Innehållsegenskapen

Som visas i exemplet efter pseudo-element ovan är innehållsegenskapen det verktyg som används för att infoga nytt innehåll på en webbsida. Den här egenskapen används bara med före och efter pseudoelement.

Det är viktigt att notera att även om det inte finns något tillgängligt innehåll som kan matas till innehållsegenskapen (som i föregående pseudoelementsexempel ovan) måste du fortfarande använda innehållsegenskapen inom parametrarna för pseudo-elementet före eller efter för att få dem att fungera som avsedd.

Nu kan du använda Pseudo-element i CSS

I den här artikeln lärde du dig att identifiera och använda pseudoelement i dina CSS-program. Du introducerades till pseudoelementen före och efter 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 pseudoelement.

10 enkla CSS-exempel som du kan lära dig på tio minuter

Vill du veta mer om att använda CSS? Prova med dessa grundläggande CSS-kodexempel till att börja med och använd dem sedan på dina egna webbsidor.

Läs Nästa

Om författaren