Pseudo elementy - ::after oraz ::before

::after to pseudo element, który pozwala na wstawianie treści na stronę za pomocą CSSa (bez konieczności umieszczania go w HTML).

W przypadku ::before jest dokładnie to samo, z tym, że ::before wstawia treść, przed wybranym elementy, natomiast ::after wstawia treść za danym elementem.

Przykłady

::after

Ta wygląda efekt ::after. Pojawia się on "za" wybranym elementem.

::before

Tutaj z kolei mamy efekt ::before. Nasza treść pojawi się "przed" wybranym elementem.

W obydwóch przypadkach nie dodawałam ani top ani left/right. Chciałam przedstawić to jak wygląda to w domyślnym pozycjonowaniu.

Ważne rzeczy:
   > content: "xxx"; - można, wpisywać zwykłe zdania, wyrazy, pojedyncze liter, cyfry, liczby; są też specjalnie kodowane znaki(można ich liste znaleźć wpisując w google: glyphs css);
   > obrazek - można wstawić obrazek, wpisując content: url(adres-obrazka); jednak tym obrazkom nie można już zmieniać rozmiarów; możemy również wstawić gradient, tak jak normalnie się go wstawia: background: linear-gradient(#ffffff, #000000);
   > nic - wpisując content: ""; nic się nie pojawi w pseudo elemencie
   > licznik - można też użyć tego jako licznik, np. content: counter(li);

: vs ::
Jaka jest różnica? Jest ona taka, że wszystkie wyszukiwarki internetowe wspiera podwójny dwukropek(::) i pojedynczy(:), oprócz IE 8, która wspiera tylko pojedynczy dwukropek(:). W tej sytuacji dla bezpieczeństwa, lepiej jest używać pojedynczego dwukropka, ponieważ będzie wiadomo, że nasze ::before i ::after zostanie wyświetlone.