CSS vlastnost content
CSS
,
CSS vlastnosti
CSS vlastnost content
slouží k zapisování obsahu do stránky z kaskádových stylů.
Zápis
element:before {
content: "Textový obsah před";
}
element:after {
content: "Textový obsah po";
}
Podpora
Vlastnost content
(česky obsah) umožňuje nastavit elementu textový obsah. Funguje od IE 8 a dá se používat jen na pseudo-elementech :before
a :after
. (V prohlížeči Opera 12 a starších, jde content
em i přepisovat původní obsah samotného elementu.)
světe! („Ahoj“ je vypsané pomocí CSS.)
Využití
K čemu ale content
využít? Vypisovat text přes CSS místo přímého umístění do HTML není nic převratného.
-
První případ je, když se má někde něco vypisovat a není možné / nechce se nám upravovat HTML.
Třeba si můžeme nají na stránce všechny elementy <small>
, dát jejich obsah do závorky a připsat k tomu „Poznámka:“.
-
Vypsat na stránce nějaký symbol/ikonu.
Dobrý zdroj obdobných symbolů je stránka CopyPasteCharacter.com.
-
Vložit do elementu obrázek. Nemusí se používat background
a nastavovat rozměry nebo opakování. Funguje to skoro jako vložení obrázku značkou <img>
(jen obrázek neroztáhne výšku řádku, ale naopak se přizpůsobí).
element:before {
content: url("adresa-obrazku.png");
}
-
Vypisovat do stránky obsah atributů pomocí attr
.
-
Vyvolat uvozovky nastavené vlastností quotes
.
-
Vytvářet v CSS automatické číslování přes counter
.
Vodorovný seznam
Tímto posutpme snadno vytvoříme vodorovný seznam s odrážkami.
- Kobercovka
- Strouhanka
- Šroubovák
- Stativ
Pomocí selektoru :first-child
je navíc možné skrýt odrážku před prvním elementem.
Animace vlastnosti content