Podręcznik referencyjny pseudo-elementów CSS

CSS pseudo-elementy

CSS pseudo-elementy są używane do ustawiania stylu specyficznych części elementu.

Na przykład, można go użyć do:

  • Ustawia styl pierwszej litery lub pierwszej linii elementu.
  • Wstawia zawartość przed lub po zawartości elementu.
  • Ustawia styl znacznika elementu listy.
  • Ustawia styl widoku tła dla okna dialogowego.

Poniższa tabela pokazuje różne pseudo-elementy w CSS:

Pseudo-elementy Przykład Opis przykładu
::after p::after Wstawia zawartość za określonym elementem.
::backdrop dialog::backdrop Ustawia styl widoku tła dla okna dialogowego lub elementu wyskakującego.
::before p::before Wstawia zawartość przed określonym elementem.
::file-selector-button ::file-selector-button Wybiera przycisk typu <input type="file">.
::first-letter p::first-letter Wybiera pierwszą literę każdego elementu <p>.
::first-line p::first-line Wybiera pierwszą linię każdego elementu <p>.
::grammar-error ::grammar-error Ustawia styl tekstu oznaczonego jako błąd gramatyczny przez przeglądarkę.
::highlight() ::highlight(custom-name) Wybiera niestandardowe wyróżnienie.
::marker ::marker Zaznacza znacznik elementu listy.
::placeholder input::placeholder Ustawia styl tekstu占位符 dla elementów <input> lub <textarea>.
::selection ::selection Ustawia styl wybranego tekstu użytkownika.
::spelling-error ::spelling-error Ustawia styl tekstu oznaczonego jako błąd pisowni przez przeglądarkę.
::view-transition ::view-transition Kontener przejścia widoku, który zawiera wszystkie przejścia widoku na stronie.
::view-transition-group ::view-transition-group Reprezentuje zestaw obrazów zrzutów ekranu przejścia widoku.
::view-transition-image-pair ::view-transition-image-pair Kontener reprezentujący 'stary' i 'nowy' stan widoku przejścia (przed i po przejściu).
::view-transition-new ::view-transition-new Stan "nowy" widoku przejścia wizualnego.
::view-transition-old ::view-transition-old Stan "stary" widoku przejścia wizualnego.