CSS Academy · Oppitunti

::before- ja ::after-sisältö

Lisätkää tuotettua sisältöä elementtien eteen tai taakse ::before- ja ::after-pseudoelementeillä sekä content-ominaisuudella.

Oppitunti 1/413 vaihetta

::before- ja ::after-sisältö on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä pseudoelementit ovat?

Pseudoelementit luovat virtuaalisia elementtejä, joita tyylitellään ikään kuin ne olisivat osa DOMia. Ne käyttävät kahta kaksoispistettä ::. Yleisimmin käytetyt ovat ::before ja ::after.

::before ja ::after

::before lisää generoitua sisältöä elementin sisällön eteen. ::after lisää sitä sisällön jälkeen. Molemmat edellyttävät content-ominaisuutta renderöityäkseen.

<span class="element">Text with generated content</span>

content-ominaisuus

content-ominaisuus hyväksyy seuraavat arvot:

Merkkijono: content: "text"
Tyhjä merkkijono: content: "" (yleinen koristeellisissa kuvioissa)
URL-osoite: content: url("icon.svg")
Laskuri: content: counter(step)
attr(): content: attr(data-tooltip)

Koristeelliset lainausmerkit

Lisätkää typografiset lainausmerkit lisäämättä niitä HTML:ään:

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

Kuviot tyhjällä content-arvolla

Kun asetatte arvoksi content: "" ja määritätte sijainnin sekä mitat, voitte luoda koristeellisia kuvioita ilman ylimääräistä HTML:ää:

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

Clearfix ::after-pseudoelementilla

Klassinen clearfix käyttää ::after-pseudoelementtiä kellutusten poistamiseen ilman ylimääräistä merkintää:

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

Työkaluvihje ::after-pseudoelementilla

Pelkkään CSS:ään perustuva työkaluvihje, joka käyttää ::after-pseudoelementtiä ja attr()-funktiota:

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

Kuvake content: url()-arvolla

Lisätkää pieni kuvake linkkien eteen käyttämällä content: url()-arvoa:

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Pseudoelementtien rajoitukset

Pseudoelementit eivät kuulu DOM:iin. Ne ovat:

käyttäjien valitsemattomissa ja hakemattomissa
oletusarvoisesti ruudunlukijoiden saavuttamattomissa
JavaScriptillä kohdentamattomissa

Älkää koskaan sijoittako olennaista sisältöä generoitavaan sisältöön — käyttäkää pseudoelementtejä vain koristeellisiin tarkoituksiin.

Yksi vai kaksi kaksoispistettä

Yksi kaksoispiste (:before) oli CSS2-syntaksi. Kaksi kaksoispistettä (::before) on CSS3-standardi, joka erottaa pseudoelementit pseudoluokista. Molemmat toimivat nykyaikaisissa selaimissa, mutta käyttäkää uudessa koodissa kahta kaksoispistettä.

Mitkä elementit tukevat ::before- ja ::after-pseudoelementtejä

Korvatuilla elementeillä (img, input, select, video) ei voi olla pseudoelementtejä, koska niillä ei ole sisältöaluetta, johon sisältö voitaisiin lisätä. Käyttäkää koristeluun sen sijaan kääre-elementtiä.

Pikatarkistus

Mikä content-arvo vaaditaan koristeelliselle ::before-pseudoelementille, jossa ei ole näkyvää tekstiä?

Vastaa interaktiivisessa oppitunnissa

Kertaus

::before ja ::after lisäävät generoituvaa sisältöä elementin todellisen sisällön ympärille. content-ominaisuus vaaditaan. Käyttäkää niitä koristeellisiin kuvioihin, kuvakkeisiin, lainausmerkkeihin ja työkaluvihjeisiin — älkää kuitenkaan koskaan merkitykselliseen sisältöön, jota käyttäjien täytyy käyttää tai lukea.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”::before- ja ::after-sisältö” ilmainen?

Kyllä – oppitunnin ”::before- ja ::after-sisältö” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”::before- ja ::after-sisältö”?

Lisätkää tuotettua sisältöä elementtien eteen tai taakse ::before- ja ::after-pseudoelementeillä sekä content-ominaisuudella. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”::before- ja ::after-sisältö”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: CSS Academy