Pseudoelementy ::before ::after CSS

Pseudoelementy ::before ::after CSS umożliwiają dodawanie specjalnych efektów i zawartości do elementów HTML bez konieczności modyfikowania samego kodu HTML. Dodatkowo dwa najczęściej używane pseudoelementy to ::before i ::after. W tym artykule opiszę czym są pseudoelementy, jak działają oraz jak je stosować w praktyce.

Co to są pseudoelementy ::before ::after?

Przede wszystkim pseudoelementy to specjalne słowa kluczowe dodawane do selektorów, które pozwalają na stylizowanie określonych części elementów lub dodawanie treści przed lub po elementach. Pseudoelementy są poprzedzone dwoma dwukropkami ::, co odróżnia je od pseudoklas, które używają jednego dwukropka :. Pseudoelementy ::before i ::after są wyjątkowo przydatne, ponieważ pozwalają na wstawianie dodatkowej zawartości do dokumentu.

Podstawy pseudoelementów `::before` i `::after`

::before dodaje zawartość przed elementem
::after dodaje zawartość po elemencie.

Składnia

Pseudoelementy ::before i ::after mają prostą składnię:

selector::before {
  /* Właściwości CSS */
}

selector::after {
  /* Właściwości CSS */
}

Aby pseudoelementy były widoczne, muszą mieć ustawioną zawartość za pomocą właściwości content.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudoelementy ::before i ::after</title>
  <style>
    p::before {
      content: "Przed: ";
      color: red;
    }

    p::after {
      content: " :Po";
      color: blue;
    }
  </style>
</head>
<body>
  <p>To jest przykładowy tekst.</p>
</body>
</html>

W powyższym przykładzie pseudoelement ::before dodaje czerwony tekst „Przed: ” przed zawartością paragrafu, a pseudoelement ::after dodaje niebieski tekst „” po zawartości paragrafu.

Praktyczne zastosowania pseudoelementów

Dodawanie ikon

Pseudoelementy często używa się do dodawania ikon przed tekstem lub po, bez konieczności dodawania dodatkowych znaczników HTML.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudoelementy ::before - Dodawanie ikon</title>
  <style>
    .icon::before {
      content: url('icon.png');
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <p class="icon">Tekst z ikoną</p>
</body>
</html>

Tworzenie elementów dekoracyjnych

Pseudoelementy mogą być używane do dodawania elementów dekoracyjnych, takich jak linie, ramki, czy cienie.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudoelementy ::before - Linie dekoracyjne</title>
  <style>
    h1::before {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background-color: black;
      margin-bottom: 10px;
    }

    h1::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background-color: black;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Nagłówek z liniami</h1>
</body>
</html>

Dodawanie znaczników w listach

Pseudoelementy mogą być używane do tworzenia niestandardowych punktorów w listach.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudoelementy ::before - Niestandardowe punktory</title>
  <style>
    ul.custom-bullet li::before {
      content: "• ";
      color: green;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <ul class="custom-bullet">
    <li>Punkt pierwszy</li>
    <li>Punkt drugi</li>
    <li>Punkt trzeci</li>
  </ul>
</body>
</html>

Tworzenie nakładki (overlays)

Pseudoelementy mogą być używane do tworzenia nakładki na obrazy lub inne elementy.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudoelementy ::before - Nakładki</title>
  <style>
    .overlay {
      position: relative;
      width: 300px;
      height: 200px;
    }

    .overlay img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .overlay::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Czarny półprzezroczysta nakładka */
    }
  </style>
</head>
<body>
  <div class="overlay">
    <img src="image.jpg" alt="Obraz z nakładką">
  </div>
</body>
</html>

Zasady stosowania pseudoelementów :before :after

Zawsze używaj content – pseudoelementy ::before i ::after wymagają ustawienia właściwości content. Bez tego pseudoelementy nie będą widoczne.
Używaj display – domyślnie pseudoelementy są elementami inline. Możesz zmienić ich typ za pomocą właściwości display.
Pozycjonowanie pseudoelementów – Pseudoelementy mogą być pozycjonowane przy użyciu position tak jak normalne elementy. Najczęściej używane wartości to absolute i relative.

Pseudoelementy :before :after – podsumowanie

Pseudoelementy ::before i ::after pozwalają na dodawanie dodatkowej zawartości i efektów bez modyfikowania HTML-a. Dlatego dzięki nim możemy tworzyć bardziej dynamiczne i estetyczne strony internetowe. Warto eksperymentować z różnymi zastosowaniami pseudoelementów, aby w pełni wykorzystać ich potencjał. Pamiętaj o właściwym stosowaniu content, display oraz pozycjonowaniu, aby osiągnąć zamierzony efekt.