Selektory pseudoelementów

Po...

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:

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...

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:

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...

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 (X)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:

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

• Przed...
• Cudzysłowy

• Do góry
• Strona główna
• Drukuj rozdział