Selektory pseudoelementów - CSS
Przed... :before
W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?
Przed... :before
selektor:before { content: "treść" }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 :before
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... :before {content: url}
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 :before {content: url}
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... :before {content: attr}
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 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 :before {content: attr}
p:before { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }
To jest akapit z atrybutem title.
Pytania i odpowiedzi
Co robi :BEFORE?
Pseudoelement :before w CSS służy do wstawiania treści przed zawartością wybranego elementu. Jest to technika wykorzystywana do dodawania dekoracji, ikon lub innych elementów graficznych przed treścią elementu.
Co to jest "before" po polsku?
Słowo "before" po polsku oznacza "przed".