Pseudoelementit ovat yksi edistyneemmistä valitsimista, jotka ovat käytettävissä CSS: ssä. Näiden valitsimien päätarkoitus on luoda ainutlaatuinen tyyli muuttamatta HTML-asiakirjaa, jota käytetään tietyn verkkosivun perusrakenteen luomiseen.

Näin pseudoelementtejä käytetään CSS: ssä.

Yleiset pseudoelementit

On olemassa laaja luettelo pseudoelementeistä, jotka helpottavat web-kehittäjien elämää. Joitakin näistä pseudoelementeistä ovat:

• Ennen
• Jälkeen
• Taustaa
• Ensimmäinen linja
• Ensimmäinen kirjain

Tietyissä tilanteissa jotkut pseudoelementit osoittautuvat sopivammiksi kuin toiset, mutta yksi asia, joka pysyy vakiona, on yleinen rakenne minkä tahansa pseudoelementin käyttämiseksi.

Pseudo-elementtien rakenneesimerkki

valitsin:: pseudo-element {
/ * css-koodi * /
} 

Vaikka voit käytä HTML-elementtiä valitsimena, on suositeltavaa käyttää luokkaa tai tunnusta, jotta vältetään tahattomien elementtien kohdistaminen asettelussa. Elementti, tyyli tai tiedot, jotka haluat lisätä haluamaasi kohtaan, tulisi sijoittaa kiharoiden aaltosulkeiden väliin.

Ennen ja jälkeen pseudoelementit ovat suosituimpia luettelossa, ja kun otetaan huomioon, että niiden käyttöön on monia käytännön tapoja - ei ole vaikea ymmärtää miksi.

Ennen Pseudo-elementin käyttäminen CSS: ssä

Vaikka se ei ole mahdotonta, on vaikea peittää kuvia luettavalla tekstillä CSS: ssä. Tämä johtuu lähinnä siitä, että kuva ja teksti olisivat saman sijainnin verkkosivulla.

Se on suhteellisen helppo Lähetä kuva tekstiryhmän taustalle, mutta kun kuva on liian kirkas, se pyrkii ylittämään sen päällä olevan tekstin. Näissä tapauksissa seuraava askel on yrittää tehdä kuvasta vähemmän läpinäkymätön peittävyysominaisuuden avulla.

Ainoa ongelma on, että koska kuva ja teksti ovat samassa paikassa, myös tekstistä tulee jonkin verran läpinäkyvää.

Yksi harvoista tehokkaista tavoista ratkaista tämä ongelma on käyttää edellä olevaa pseudoelementtiä.

Ennen Pseudo-elementti -esimerkkiä

.aloitussivu{
/ * Järjestää kuvan peittokuvan tekstin * /
näyttö: joustava;
taipumissuunta: sarake;
perustella sisältö: keskus;
kohdista tuotteet: keskellä;
tekstin tasaus: keskellä;
/ * asettaa sivun säätymään erikokoisille näytöille * /
korkeus: 100vh;
}
.landingPage:: ennen {
sisältö:'';
/ * tuo kuvan * /
tausta: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
ei toista keskusta / kansi;
/ * sijoittaa peitteen kuvan päälle * /
opasiteetti: 0,4;
/ * tekee kuvan näkyväksi * /
sijainti: absoluuttinen;
yläosa: 0;
vasen: 0;
leveys: 100%;
korkeus: 100%;
}

Yllä oleva koodi on luotu käytettäväksi yhdessä alla olevan HTML landingPage-luokan kanssa. Kuten yllä olevasta koodista ilmenee, käyttämällä edellä olevaa pseudoelementtiä voimme kohdistaa kuvan ja käyttää siinä olevaa opasiteettiominaisuutta ennen kuvan yhdistämistä tekstiin.

Ennen pseudoelementin käyttäminen


Tämä on seurausta edellisen pseudoelementin käytöstä
päällekkäin ja kuva luettavalla tekstillä.

Tämä johtaa siihen, että kuvaan sijoitetaan peite ja yläosassa näkyy selkeä teksti, kuten alla olevassa kuvassa näkyy:

After Pseudo -elementin käyttäminen CSS: ssä

Käytännöllinen käyttö jälkipseudoelementille on auttaa HTML-lomakkeen luomisessa. Suurin osa lomakkeista luodaan joukolla kenttiä, jotka edellyttävät tietoja lomakkeen lähettämiseksi onnistuneesti.

Yksi tapa osoittaa, että lomakkeen kenttä vaatii tietoja, on sijoittaa tähti tämän kentän tunnisteen jälkeen. Jälkipseudoelementti tarjoaa sinulle käytännöllisen tavan tehdä tämä.

Pseudo-elementin jälkeisen esimerkin käyttäminen

. vaaditaan:: jälkeen {
sisältö: '*';
väri punainen;
} 

Lisäämällä yllä oleva koodi lomakkeen CSS-osioon varmistat, että jokaista vaadittavan luokan sisältävää tarraa seuraa suoraan punainen tähti. Jälkipseudoelementti on käytännöllinen myös tässä esimerkissä, koska se auttaa erottamaan tyylin rakenteesta (mikä on aina ihanteellista ohjelmistokehityksessä.)

Sisältöomaisuus

Kuten yllä olevasta näennäiselementtien jälkeisestä esimerkistä käy ilmi, sisältöominaisuus on työkalu, jota käytetään uuden sisällön lisäämiseen verkkosivulle. Tätä ominaisuutta käytetään vain ennen ja jälkeen pseudoelementtien kanssa.

On tärkeää huomata, että vaikka sisältöomaisuuteen syötettävää sisältöä ei olisikaan (kuten edellisessä pseudoelementti-esimerkissä) yllä), sinun on silti käytettävä sisältöominaisuutta pseudoelementin ennen tai jälkeen parametrien sisällä, jotta ne toimisivat tarkoitettu.

Nyt voit käyttää pseudoelementtejä CSS: ssä

Tässä artikkelissa opit tunnistamaan ja käyttämään pseudoelementtejä CSS-ohjelmissasi. Sinulle esiteltiin ennen ja jälkeen pseudoelementit ja annettiin käytännön tapoja käyttää molempia. Pystyt myös selvittämään, miksi sisältöominaisuus on välttämätöntä ennen ja jälkeen pseudoelementtien onnistuneen käytön.

10 yksinkertaista CSS-koodiesimerkkiä, jotka voit oppia 10 minuutissa

Haluatko tietää enemmän CSS: n käytöstä? Kokeile aluksi näitä CSS-peruskoodiesimerkkejä ja käytä niitä sitten omilla verkkosivuillasi.

Lue seuraava

Kirjailijasta