Pseudoelementy

5.1 Podstawowe pseudoelementy

Pseudoelementy w CSS pozwalają deweloperom dodawać style i treści do części dokumentu, które nie mogą być wybrane za pomocą zwykłych selektorów. Tworzą "wirtualne" elementy, które można stylizować, jakby były częścią struktury HTML. To potężne narzędzie do tworzenia skomplikowanych layoutów i poprawy wyglądu stron internetowych.

Co to są pseudoelementy?

Pseudoelementy to słowa kluczowe dodawane do selektorów, które pozwalają stylizować określone części elementów. Tworzą wirtualne elementy, które stają się częścią wizualnej prezentacji, ale nie zmieniają oryginalnej struktury HTML. Pseudoelementy są zwykle używane do stylizacji pierwszych liter, wierszy tekstu, dodawania dekoracyjnych elementów i innych zadań.

Podstawowe pseudoelementy

Niektóre najczęściej używane pseudoelementy obejmują:

• ::before: dodaje treści przed zawartością wybranego elementu
• ::after: dodaje treści po zawartości wybranego elementu
• ::first-letter: stylizacja pierwszej litery elementu
• ::first-line: stylizacja pierwszego wiersza elementu
• ::selection: stylizacja tekstu zaznaczonego przez użytkownika

Jak używać pseudoelementów

Pseudoelementy w CSS oznacza się podwójnym dwukropkiem (::), chociaż niektóre pseudoelementy mogą również wspierać starą notację z jednym dwukropkiem (:) dla zachowania kompatybilności wstecznej.

Składnia:

    
      selektor::pseudoelement {
        właściwość: wartość;
        właściwość: wartość;
        właściwość: wartość;
        ...
      }
    
  

5.2 Przykłady użycia pseudoelementów

1. Dodawanie dekoracyjnych elementów

Pseudoelementy są często używane do dodawania dekoracyjnych elementów przed lub po zawartości elementu:

    
      /* Dodanie ikony przed tekstem linku */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* Dodanie dekoracyjnego elementu po akapicie */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

W tych przykładach pseudoelementy ::before i ::after są użyte do dodania ikony przed tekstem linku i dekoracyjnego elementu po akapicie odpowiednio.

2. Stylizacja pierwszych liter i wierszy

Pseudoelementy mogą być użyte do stylizacji pierwszych liter lub pierwszych wierszy tekstu, co jest często stosowane w typografii:

    
      /* Stylizacja pierwszej litery akapitu */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* Stylizacja pierwszego wiersza akapitu */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

W tych przykładach pseudoelementy ::first-letter i ::first-line są użyte do stylizacji pierwszej litery i pierwszego wiersza akapitu.

3. Zaznaczanie tekstu

Pseudoelement ::selection jest używany do stylizacji tekstu, który jest zaznaczony przez użytkownika:

    
      /* Stylizacja zaznaczonego tekstu */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

W tym przykładzie tekst zaznaczony przez użytkownika będzie miał niebieskie tło i biały kolor tekstu.

5.3 Cechy i ograniczenia pseudoelementów

Ograniczenia:

• Tylko jedno użycie: pseudoelementy ::before i ::after mogą być użyte tylko raz na każdym elemencie
• Wymóg content: pseudoelementy ::before i ::after wymagają użycia właściwości content, nawet jeśli jest pusta
• Kompatybilność z przeglądarkami: nowoczesne przeglądarki wspierają podwójne dwukropek do oznaczania pseudoelementów, ale dla starych pseudoelementów z jednym dwukropkiem również działają

Przykład użycia właściwości content

    
      /* Przykład użycia pustego pseudoelementu dla dekoracyjnego elementu */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

W tym przykładzie pusty pseudoelement ::before jest użyty do dodania dekoracyjnego paska przed zawartością div.