Hur man använder före och efter pseudoelement i CSS

Hur man använder före och efter pseudoelement i CSS

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 för en given webbsida.





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



hur man lägger till rader i word

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 pseudo-element inkluderar:





  • Innan
  • Efter
  • Bakgrund
  • Första linjen
  • Första bokstaven

I specifika situationer kommer vissa pseudo-element 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 alla pseudo-element.

Pseudo-element Struktur Exempel


selector::pseudo-element{
/* css code */
}

Även om du kan använda ett HTML -element som väljare rekommenderas det att du använder en klass eller ett id för att undvika att rikta in oavsiktliga element i din layout. Elementet, stilen eller data som du vill infoga vid önskad position bör 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 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 mest på att bilden och texten skulle inta 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 ovanpå den. I dessa fall är nästa steg att försöka göra bilden mindre ogenomskinlig med hjälp av egenskapen opacitet.

Det enda problemet är att eftersom bilden och texten intar samma position kommer texten också att bli något transparent.



Ett av få effektiva sätt att lösa detta problem är att använda föregående pseudo-element.

Använda före Pseudo-elementsexemplet


.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 skapas för att användas i samklang med klassen HTML landingPage nedan. Som visas i koden ovan kan vi med hjälp av föregående pseudo-element rikta in bilden och använda opacitetsegenskapen på den innan bilden kombineras med texten.





This is the result of using the before pseudo-element
to overlay and image with readable text.


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

Använda 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 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. Efter-pseudo-elementet ger dig ett praktiskt sätt att göra detta.

Använda exemplet After Pseudo-element


.required::after{
content: '*';
color: red;
}

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

hur man får en statisk ip

Innehållsegenskapen

Som visas i exemplet efter pseudo-element 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 pseudo-element.

Det är viktigt att notera att även om det inte finns något innehåll som kan matas till innehållsegenskapen (som i exemplet före pseudo-element ovan), måste du fortfarande använda innehållsegenskapen inom parametrarna 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 att identifiera och använda pseudo-element i dina CSS-program. Du introducerades för före och efter pseudoelement och fick praktiska sätt att använda båda. Du kunde också se varför innehållsegenskapen är nödvändig för en framgångsrik användning av före och efter pseudo-element.

Dela med sig Dela med sig Tweet E-post 10 enkla CSS -kodexempel du kan lära dig på 10 minuter

Behöver du hjälp med CSS? Prova dessa grundläggande CSS -kodexempel till att börja med och applicera dem sedan på dina egna webbsidor.

Läs Nästa Relaterade ämnen
  • Programmering
  • Webbdesign
  • CSS
Om författaren Kadeisha Kean(21 artiklar publicerade)

Kadeisha Kean är en fullstack mjukvaruutvecklare och teknisk/teknikförfattare. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska begreppen; producerar material som lätt kan förstås av någon nybörjare inom teknik. Hon brinner för att skriva, utveckla intressant programvara och 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, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera