CSS vlastnost content

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 contentem i přepisovat původní obsah samotného elementu.)

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.

1. 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:“.

   Kobercovka

   Fytopuf.

2. Vypsat na stránce nějaký symbol/ikonu.

   Kobercovka

   Strouhanka

   Dobrý zdroj obdobných symbolů je stránka CopyPasteCharacter.com.

3. 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");
   }

4. Vypisovat do stránky obsah atributů pomocí attr.

5. Vyvolat uvozovky nastavené vlastností quotes.

6. Vytvářet v CSS automatické číslování přes counter.

Vodorovný seznam

Tímto posutpme snadno vytvoříme vodorovný seznam s odrážkami.

Pomocí selektoru :first-child je navíc možné skrýt odrážku před prvním elementem.

Animace vlastnosti content

• CSS Tricks: Animating the `content` Property