Úprava obsahu pomocí content a attr

Vlastnost content a attr()

content

Použitím této vlastnosti lze přidávat do stránky obsah zapsaný v CSS pravidlech. Funkční od Internet Exploreru 8.

element:after {content: "Ahoj"}

Zajímavá odlišnost je v prohlížeči Opera, kde lze použít content přímo na element (bez :after/:before a přepíše se tím jeho obsah). V jiných prohlížečích toto nefunguje.

p {content: "Ahoj"}
p:before {content: "<"}
p:after {content: ">"}

• V Opeře budou odstavce ve tvaru <Ahoj>,
• v ostatních prohlížečích <Původní text odstavce>,
• ve starších prohlížečích Původní text odstavce.

attr()

Touto funkcí lze získat obsah libovolného atributu a využít toho v kombinaci s content.

<style>
p:after {content: attr(title)}
</style>
<p title='světe!'>Ahoj

Výsledek bude Ahoj (živá ukázka).

Spojování řetězců se dělá prostým řetězením. Tedy vypreparovat atributy z odkazu…

<a href='http://jecas.cz' title='Je čas' class='odkaz'>Odkaz</a>

… a sestavit z nich větu bude vypadat následovně.

a:after {
	content: ' (Tento odkaz vede na „'attr(href) '“, má titulek „'
		attr(title) 
		'“ a' " třídu „"attr(class)'“.)'
}

Živá ukázka: Odkaz

Možnosti řetězení jsou skutečně benevolentní: mezi text v uvozovkách a attr lze dát cokoliv (mezeru, tabulátor, odřádkování) nebo také klidně nic.

Vlastní atributy

Pravá zábava začíná s použitím vlastních atributů. Jedna možnost je použít tzv. data-* atributy, druhá si atribut kompletně vymyslet. Oboje funguje.

<style>
p:after {content: ": „" attr(mujAtribut) ' ' attr(data-mujAtribut) '!“'}
</style>
<p mujAtribut='Ahoj' data-mujAtribut='světe'>Říká

Říká

Pseudo-třídy :before a :after u obrázků

U obrázků (značka <img>) není možné pseudo-třídy používat. Následující kód pro doplnění altu k obrázku tedy nebude fungovat:

img:after {content: attr(alt)}

Ukázka