O webu
CSS 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.)

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.

  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.

  • 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