CSS vlastnosti 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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Box model

Box model

Co je to a jaký box-model si vybrat. Jaké jsou výhody a nevýhody.

Komentáře