Kurs HTML

11.2. Pseudoelementy ::before i ::after (właściwość content)

Strona główna > Kurs CSS > Rozdział 11: Pseudoelementy > Pseudoelementy ::before i ::after (właściwość content)

Wprowadzenie: Dodawanie treści za pomocą CSS

Pseudoelementy ::before i ::after są jednymi z najczęściej używanych i najbardziej wszechstronnych pseudoelementów. Pozwalają one **wstawić treść** (tekstową lub graficzną) **przed** (::before) lub **po** (::after) właściwej zawartości elementu.

Ta wstawiona treść jest traktowana jak wirtualny element potomny (pierwszy dla ::before, ostatni dla ::after) i można ją stylizować za pomocą CSS, np. nadawać jej kolor, tło, wymiary, pozycjonować itp.

Kluczową właściwością dla ::before i ::after jest content, która określa, co ma zostać wstawione.

Właściwość content

Właściwość content jest **wymagana**, aby pseudoelementy ::before i ::after były w ogóle renderowane. Może przyjmować różne wartości:

  • Ciąg znaków: content: "Tekst"; lub content: 'Tekst'; - wstawia podany tekst. Można używać znaków specjalnych Unicode (np. \201C dla lewego cudzysłowu “).
  • Pusty ciąg: content: ""; - wstawia pusty pseudoelement, który można następnie stylizować (np. nadać mu tło, wymiary, aby stworzyć kształt lub ikonkę).
  • url(): content: url('obrazek.png'); - wstawia obrazek. Uwaga: kontrola nad rozmiarem i pozycjonowaniem obrazka wstawionego przez content jest ograniczona; często lepszym rozwiązaniem jest użycie background-image na pustym pseudoelemencie.
  • attr(): content: attr(data-nazwa); - wstawia wartość podanego atrybutu HTML elementu.
  • open-quote / close-quote / no-open-quote / no-close-quote: Używane do wstawiania cudzysłowów zdefiniowanych we właściwości quotes.
  • counter() / counters(): Używane do wstawiania wartości liczników CSS (np. do niestandardowej numeracji).
  • none: Nic nie wstawia (pseudoelement nie jest generowany).

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

Dodawanie tekstu i symboli

<p class="warning">Uwaga! Ważna informacja.</p>
<a href="plik.pdf" class="pdf-link">Pobierz raport</a>
<blockquote class="quote">To jest cytat.</blockquote>
/* Dodaj symbol ostrzeżenia przed paragrafem .warning */
.warning::before {
  content: "⚠️ "; /* Symbol ostrzeżenia + spacja */
  color: orange;
  font-weight: bold;
}

/* Dodaj ikonkę PDF po linku .pdf-link */
.pdf-link::after {
  content: " (PDF)";
  font-size: 0.8em;
  color: gray;
}

/* Dodaj cudzysłowy do cytatu */
.quote {
    quotes: "\201C" "\201D"; /* Definiuje cudzysłowy: “ ” */
}
.quote::before {
  content: open-quote; /* Wstaw lewy cudzysłów */
  font-size: 1.5em;
  margin-right: 0.2em;
}
.quote::after {
  content: close-quote; /* Wstaw prawy cudzysłów */
  font-size: 1.5em;
  margin-left: 0.2em;
}

Tworzenie dekoracji i kształtów (z pustym content)

Często używa się ::before i ::after z content: ""; do tworzenia czysto wizualnych efektów, bez dodawania semantycznej treści.

<h2 class="decorated-title">Tytuł z dekoracją</h2>
<div class="tooltip-container">
  Najechanie pokaże tooltip
  <span class="tooltip-text">To jest treść tooltipa!</span>
</div>
/* Dodaj linię pod tytułem */
.decorated-title::after {
  content: ""; /* Pusty content */
  display: block; /* Aby nadać wymiary */
  width: 50px;
  height: 3px;
  background-color: blue;
  margin-top: 5px;
}

/* Prosty tooltip (wymaga dodatkowego pozycjonowania) */
.tooltip-container {
  position: relative; /* Kontekst pozycjonowania dla tooltipa */
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip-text {
  visibility: hidden; /* Ukryty domyślnie */
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Pozycjonowanie nad elementem */
  left: 50%;
  margin-left: -60px; /* Wyśrodkowanie */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Strzałka tooltipa za pomocą ::after */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* Na dole tooltipa */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent; /* Trójkąt */
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

Wstawianie wartości atrybutu (attr())

<a href="https://example.com" data-tooltip="Odwiedź Example.com">Link</a>
/* Pokaż wartość atrybutu data-tooltip po linku */
a[data-tooltip]::after {
  content: " (" attr(data-tooltip) ")"; /* Łączenie tekstu i wartości atrybutu */
  font-size: 0.8em;
  color: gray;
}

Uwaga: Obecnie attr() w CSS ma ograniczone możliwości i zazwyczaj działa tylko wewnątrz właściwości content do pobierania wartości jako string. Trwają prace nad rozszerzeniem jego funkcjonalności.

Stylizowanie ::before i ::after

Pseudoelementy ::before i ::after domyślnie są elementami typu inline. Aby móc nadawać im wymiary (width, height), marginesy pionowe, padding pionowy lub używać transform, często trzeba zmienić ich właściwość display na block, inline-block, flex, grid lub użyć pozycjonowania absolutnego (position: absolute).

Pozycjonowanie absolutne jest bardzo często używane w połączeniu z ::before/::after do umieszczania dekoracji, ikon, nakładek itp. w określonym miejscu względem elementu nadrzędnego (który powinien mieć ustawione position: relative, absolute, fixed lub sticky, aby stać się kontekstem pozycjonowania).

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz listę linków. Użyj ::before, aby dodać symbol strzałki (np. `→` lub `→`) przed każdym linkiem w liście.

Rozwiązanie:

HTML:

<ul class="arrow-list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

CSS:

.arrow-list li::before { /* Można też do a::before */
  content: "→ "; /* Strzałka i spacja */
  color: blue;
}

/* Opcjonalnie: usunięcie domyślnego punktora listy */
.arrow-list {
    list-style-type: none;
    padding-left: 0;
}

Efekt: Przed każdym elementem listy pojawi się niebieska strzałka.

Zadanie 2 (do samodzielnego wykonania)

Stwórz element div z klasą .ribbon. Użyj ::after z pustym content, nadaj mu wymiary, tło i użyj pozycjonowania absolutnego oraz transformacji (np. rotate), aby stworzyć efekt dekoracyjnej wstążki w rogu diva.

Zadanie 3 (do samodzielnego wykonania)

Stwórz link z atrybutem data-file-type="PDF". Użyj ::after i funkcji attr(), aby wyświetlić typ pliku (wartość atrybutu data-file-type) w nawiasach po tekście linku.

FAQ - Najczęściej zadawane pytania

Czy treść dodana przez ::before/::after jest częścią DOM?

Nie, treść generowana przez content nie jest częścią drzewa DOM. Oznacza to, że nie można jej zaznaczyć myszą (chyba że przeglądarka to specjalnie umożliwia, jak w przypadku ::marker), nie jest ona dostępna dla czytników ekranu (chyba że użyjemy specjalnych technik ARIA lub treść jest czysto dekoracyjna) i nie można nią manipulować za pomocą JavaScriptu tak jak zwykłymi elementami DOM.

Czy muszę używać content dla ::before/::after?

Tak, właściwość content jest absolutnie wymagana. Nawet jeśli chcesz stworzyć tylko pusty element do stylizacji (np. kształt, tło), musisz ustawić content: "";. Bez właściwości content pseudoelement po prostu nie zostanie wyrenderowany.

Jak wyśrodkować treść w ::before/::after?

Ponieważ domyślnie są to elementy inline, można użyć text-align: center; na elemencie nadrzędnym. Jeśli zmienisz display pseudoelementu na block lub flex, możesz użyć standardowych technik centrowania dla tych typów wyświetlania (np. margin: auto; dla bloku, lub właściwości flexboxa).

Czy mogę animować ::before i ::after?

Tak, pseudoelementy ::before i ::after można animować za pomocą właściwości transition i animation tak samo jak zwykłe elementy. Można animować ich właściwości, takie jak opacity, transform, background-color itp., co pozwala tworzyć ciekawe efekty wizualne.