Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

content

content-ominaisuudella määritetään näennäiselementtien (:after ja/tai :before) sisältö. Ominaisuudelle voidaan antaa seuraavat arvot:

content-ominaisuuden arvot
Arvo Selitys
normal Kaikkien elementtien säännönmukainen alkuarvo. Näennäiselementeillä tämä taas vastaa seuraavaa arvoa.
none Näennäiselementtiä ei tuoteta.
<merkkijono> Merkkijonot koostuvat merkeistä, yleensä tavallisesta tekstistä ja mahdollisesti erikoismerkeistä. Merkkijonot kirjoitetaan, joko ("kaksihipsuisten") lainausmerkkien, tai ('yksihipsuisten') heittomerkkien sisälle.
<url> Viittaus ulkoiseen resurssiin, tyypillisesti kuvatiedostoon. Esimerkki ennen elementtiä -selektorin sivulla.
<attr(X)> Funktio joka palauttaa elementin X-attribuutin arvon (tässä X korvataan oikealla attribuuttinimellä). Esimerkki jälkeen elementin -selektorin sivulla.
<laskuriviittaus> Laskuriviittaus annetaan jollakin seuraavista tavoista:
  • counter(tunnus)
  • counter(tunnus,tyyppi)
  • counters(tunnus,merkkijono)
  • counters(tunnus,merkkijono,tyyppi)
Jossa tunnus on laskurin yksilöivä tunniste (none, inherit ja initial ovat kiellettyjä nimiä) ja tyyppi on jokin list-style-type-ominaisuuden arvo (oletuksena decimal).
open-quote Lainauksen avaava lainausmerkki (joka noudetaan quotes-ominaisuuden arvosta).
close-quote Lainauksen sulkeva lainausmerkki (joka noudetaan quotes-ominaisuuden arvosta).
no-open-quote Ei piirretä avaavaa lainausmerkkiä.
no-close-quote Ei piirretä sulkevaa lainausmerkkiä.
inherit Ominaisuus perii arvonsa emoelementiltään.

Esimerkki

Tämä on esimerkkielementti, johon viitataan seuraavilla tyylisäännöillä:

#esimerkkielementti {
border:1px dotted #aaa;/*reunaviiva ympärille*/
padding:1ex;/*hieman täytettä*/
}
#esimerkkielementti:after {
display:block;
border:3px double #000;
margin-top:1em;
padding:0.5em;
color:red;
text-align:center;
/*huomioi heitto- ja lainausmerkkien suhde:*/
content:'Tämä on merkkijonoesimerkki \A näennäiselementin ":after" sisällöstä.';
white-space:pre;/*jotta merkkijonon rivinvaihto (\A) näkyisi*/
}

Huomiot

Lisätietoja englanniksi

CSS 2.1 -ominaisuusreferenssi | CSS 2.1 -sekalaiset ominaisuudet