Kuinka käyttää ennen ja jälkeen pseudoelementtejä CSS: ssä

Kuinka käyttää ennen ja jälkeen pseudoelementtejä CSS: ssä

Pseudoelementit ovat yksi kehittyneimmistä valitsimista, joita voidaan käyttää CSS: ssä. Näiden valitsimien pääasiallinen tarkoitus on luoda ainutlaatuinen tyyli muuttamatta HTML -asiakirjaa, jota käytetään tietyn verkkosivun perusrakenteen luomiseen.





Näin voit käyttää pseudoelementtejä CSS: ssä.



kuinka siirtää kansioita Google -asemasta toiseen

Yleisiä pseudoelementtejä

Saatavilla on laaja luettelo pseudo-elementeistä, jotka helpottavat web-kehittäjän elämää. Jotkut näistä pseudo-elementeistä sisältävät:





  • 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 minkä tahansa pseudoelementin käytön yleinen rakenne.

Esimerkki pseudo-elementeistä


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

Vaikka voit käyttää HTML -elementtiä valitsimena, on suositeltavaa käyttää luokkaa tai tunnusta, jotta vältät kohdistamisen tahattomiin elementteihin asettelussasi. Elementti, tyyli tai tiedot, jotka haluat lisätä haluttuun kohtaan, on sijoitettava kiharareunojen väliin.



Ennen ja jälkeen pseudoelementit ovat suosituimpia luettelossa, ja koska niitä on monia käytännön tapoja käyttää-ei ole vaikea ymmärtää miksi.

Ennen Pseudo-elementtiä 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 ovat samassa paikassa verkkosivulla.



Se on suhteellisen helppoa lähettää kuvan tekstiryhmän taustalle , mutta kun kuva on liian kirkas, sillä on taipumus ylittää sen päällä oleva teksti. Näissä tapauksissa seuraava askel on yrittää tehdä kuvasta vähemmän läpinäkymätön käyttämällä opasiteettiominaisuutta.

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



Yksi harvoista tehokkaista tavoista ratkaista tämä ongelma on käyttää ennen pseudo-elementtiä.

Esimerkki Ennen pseudoelementtiä


.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%;
}

Yllä oleva koodi on luotu käytettäväksi yhdessä alla olevan HTML landingPage -luokan kanssa. Kuten yllä olevasta koodista käy ilmi, käyttämällä ennen pseudo-elementtiä voimme kohdistaa kuvan ja käyttää sen opasiteettiominaisuutta ennen kuin kuva yhdistetään tekstiin.





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


Tämän seurauksena kuvaan asetetaan peittokuva ja päälle tulee selkeä teksti, kuten alla olevassa kuvassa näkyy:

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

Käytännössä pseudoelementin jälkeen on apua HTML-lomakkeen luomisessa. Useimmat lomakkeet 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 otsikon jälkeen. Pseudoelementti tarjoaa käytännöllisen tavan tehdä tämä.

Esimerkki After Pseudo-elementin avulla


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

Kun lisäät yllä olevan koodin lomakkeen CSS -osioon, varmistat, että jokaisen tarran, joka sisältää vaaditun luokan, seuraa suoraan punainen tähti. Jälkipseudoelementti on myös käytännöllinen tässä esimerkissä, koska se auttaa erottamaan tyylin rakenteesta (joka on aina ihanteellinen ohjelmistokehityksessä.)

missä taskulamppu on tässä puhelimessa

Sisältö -omaisuus

Kuten yllä olevasta pseudoelementtiesimerkistä näkyy, 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 pseudoelementtejä.

On tärkeää huomata, että vaikka sisältöominaisuuteen ei ole syötettävää sisältöä (kuten edellä olevassa pseudoelementtiesimerkissä), sinun on silti käytettävä sisältöominaisuutta ennen tai jälkeen pseudoelementti saada ne toimimaan suunnitellulla tavalla.

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 pseudo-elementit ja annettiin käytännön tapoja käyttää molempia. Voit myös nähdä, miksi sisältöominaisuus on välttämätön ennen ja jälkeen pseudoelementtien onnistuneen käytön.

Jaa Jaa Tweet Sähköposti 10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

Tarvitsetko apua taidon CSS kanssa? Kokeile aluksi näitä CSS -koodin perusesimerkkejä ja käytä niitä sitten omilla verkkosivuillasi.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • Web-suunnittelu
  • CSS
Kirjailijasta Kadeisha Kean(21 artikkelia julkaistu)

Kadeisha Kean on täyspinoinen ohjelmistokehittäjä ja tekninen/teknologinen kirjoittaja. Hänellä on selkeä kyky yksinkertaistaa joitain monimutkaisimpia teknologisia käsitteitä; tuottaa materiaalia, jonka jokainen tekniikan aloittelija voi helposti ymmärtää. Hän on intohimoinen kirjoittamiseen, mielenkiintoisten ohjelmistojen kehittämiseen ja maailman matkustamiseen (dokumenttielokuvien kautta).

Lisää Kadeisha Keanilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi