11.2. Pseudoelementy ::before
i ::after
(właściwość content
)
::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";
lubcontent: '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 przezcontent
jest ograniczona; często lepszym rozwiązaniem jest użyciebackground-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ściquotes
.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.