Moderní tvorba webových aplikací

O webu

CSS vlastnost content

CSS vlastnost content slouží k zapisování obsahu do stránky z kaskádových stylů.

3 minuty

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

Související články

Vložení CSS do stránky

Jakými všemi způsoby připojit CSS do stránky.

9 minut

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025