Czym jest pseudo-element?

Pseudo-element w CSS to słowo kluczowe dodawane do selektora, które pozwala stylizować określoną część elementu bez jawnego tworzenia dodatkowych elementów DOM.

Najczęściej używane pseudo-elementy to:

• ::before: Wstawia wygenerowaną zawartość przed zawartością wybranego elementu.
• ::after: Wstawia wygenerowaną zawartość po zawartości wybranego elementu.
• ::first-line: Stosuje style do pierwszej linii bloku.
• ::first-letter: Stosuje style do pierwszej litery bloku.
• ::selection: Stosuje style do części elementu wybranej przez użytkownika (np. podczas zaznaczania tekstu myszą).
• ::placeholder: Stosuje style do tekstu podpowiedzi w polach <input> lub <textarea>.

Przykład użycia ::before i ::after:

div::before {
  content: "Przedrostek: "; // Wymagana właściwość content
  color: blue;
}

div::after {
  content: " Przyrostek"; // Wymagana właściwość content
  color: red;
}

Przykład użycia ::first-line i ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Pseudo-elementy są przydatne do dodawania elementów dekoracyjnych, generowania treści, stylizacji części tekstu i innych zadań, upraszczając strukturę HTML. Historycznie zaczynały się od pojedynczego dwukropka (:), ale specyfikacja CSS3 wprowadziła dwa dwukropki (::) dla rozróżnienia pseudo-klas (:hover, :focus) i pseudo-elementów, choć jeden dwukropek (:) nadal jest obsługiwany przez większość przeglądarek dla starszych pseudo-elementów. Zaleca się używanie ::.