::after / ::before

pseudoelementy pozwalające na zamieszczenie zawartości na stronie bez potrzeby ingerencji w kod html, w zawiązku z czym nie pojawia się w DOM.

::before

przed określonym elementem

::after

po określonym elemencie

 

div::before {
  content: "hi";
}

div::after {
  content: "bye";
}

Jako content możemy zamieścić:

• ciąg znaków String, gdzie znaki specjalne muszą być zakodowane jako Unicode
• obraz – jako; url (/path/to/image.jpg);
• gradient
• nic, jako content:””
• licznik – counter – counter(li) – użyteczny do stylowania listy

nie można zamieścić znaczników html tak by były interpretowane na kod.

: czy ::

nowsze przeglądarki obsługują : oraz :: jednak IE8 obsługuje tylko :, jeśli więc nie jest potrzebny nam suport dla tej przeglądarki możemy śmiało korzystać z ::