Jak używać :before i :after

Question

Witam.

Mam pytanie, bowiem często w demo widzę .cośtam:before

Nie wiem o co w tym chodzi. Czy umie ktoś to prosto wytłumaczyć?

Pozdrawiam

Answer 1

Before to znaczy przed, czyli np.

div:before
{
content: 'a';
}

Dopisze "a" przed divem, można jeszcze napisać np. color: red, wtedy "a" będzie czerwone.

Jest też after, czyli za.

Comments

Nie zgodzę się z tym, że element jest tworzony przed lub za divem. Jest on tworzony w jego środku, lecz albo na jego początku, lub na końcu.

---

Przepraszam, mój błąd :)

Answer 2

To jest pseudo element. Tutaj masz opisane http://blog.wilgucki.pl/2011/07/przewodnik-po-pseudo-elementach-before-i-after.html

Comments

To jest PSEUDOELEMENT. Pseudoklasa to np. :hover

---

+1 pomyliłem się

Answer 3

Jak używać, lub raczej jak nie używać :before i :after:

http://cj-johnson.github.io/Single-Tag_Website/

Zobacz jak wygląda html, a potem przeanalizuj css. Powinno Ci się rozjaśnić.

Comments

Teoretycznie można zrobić stronę bez ani jednej linijki HTML: https://mathiasbynens.be/notes/css-without-html ;) szkoda, że już nie działa (w lisku działało, w chrome może będzie działać)

---

Tego nie znałem. Dobre.

Ale dlaczego piszesz, że już nie działa? Działa w lisku, działa w starej operze (12.16), nie działa w chrome.

---

Działa w lisku? No to jednak działa ;)