Przejdź do treści

Selektory pseudoelementów

Przed...

selektor:before { content: "treść" }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Natomiast jako wyraz "treść" można wpisać dowolny tekst.

Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, 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:before { content: "POCZĄTEK "; color: red }
to wszystkie akapity będą rozpoczynały się od wyrazu "POCZĄTEK", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu:

To akapit, rozpoczynający się wyrazem "POCZĄTEK", pomimo że nie został on umieszczony w treści akapitu.

Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się rozpoczynał normalnie ("To jest akapit...") - nie zobaczysz efektu.

Obrazek przed...

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

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

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

Przykład:

To jest akapit, rozpoczynają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:before { content: url(obrazek.gif) " POCZĄTEK "; color: red }

To jest akapit, rozpoczynający się obrazkiem i tekstem "POCZĄTEK", pomimo że nie zostały one umieszczone w treści akapitu.

Wartość atrybutu przed...

Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie przed właściwą 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:before { content: attr(atrybut) }

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

Przykład:

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

To jest akapit z atrybutem title.

Komentarze

Zobacz więcej komentarzy