Po... :after

W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?

Po... :after

selektor:after { content: "treść" }

Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład :after

Jeżeli w arkuszu stylów została umieszczona następująca reguła:

p:after { content: " KONIEC"; color: red }

to wszystkie akapity będą kończyły się wyrazem "KONIEC", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu:

Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się kończył normalnie ("...w treści akapitu.") - nie zobaczysz efektu.

Obrazek po... :after {content: url}

Zamiast tekstu generowanego po wybranym elemencie, w analogiczny sposób można tam dodać grafikę:

selektor:after { content: url(ścieżka dostępu do obrazka) }

Ścieżkę dostępu należy konstruować względem arkusza CSS!

Przykład :after {content: url}

To jest akapit, kończący się obrazkiem, pomimo że nie został on umieszczony w treści akapitu.

Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji:

p:after { content: " KONIEC " url(obrazek.gif); color: red }

Wartość atrybutu po... :after {content: attr}

Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie po właściej zawartości elementu wartości wybranego atrybutu, który został przypisany z poziomu HTML elementowi, na który wskazuje selektor prosty w regule stylu:

selektor:after { content: attr(atrybut) }

Jeżeli element nie będzie posiadał podanego atrybutu, zostanie wstawiona wartość pusta.

Przykład :after {content: attr}

p:after { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }