CSS Academy · Lekcja

Zawartość ::before i ::after

Nauczy się Pan/Pani wstawiać generowaną zawartość przed elementami lub po nich za pomocą ::before i ::after oraz właściwości content.

Zawartość ::before i ::after to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym są pseudoelementy?

Pseudoelementy tworzą wirtualne elementy, które można stylować tak, jakby były częścią DOM. Używają podwójnych dwukropków ::. Najczęściej używane to ::before i ::after.

::before i ::after

::before wstawia wygenerowaną zawartość przed zawartością elementu. ::after wstawia ją za nią. Oba pseudoelementy wymagają właściwości content, aby zostały wyrenderowane.

<span class="element">Text with generated content</span>

Właściwość content

Właściwość content akceptuje:

Ciąg znaków: content: "text"
Pusty ciąg znaków: content: "" (często używany do tworzenia kształtów dekoracyjnych)
Adres URL: content: url("icon.svg")
Licznik: content: counter(step)
attr(): content: attr(data-tooltip)

Dekoracyjne cudzysłowy

Dodawanie typograficznych cudzysłowów bez umieszczania ich w kodzie HTML:

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

Kształty z pustą wartością content

Ustawienie content: "" wraz z pozycjonowaniem i wymiarami tworzy dekoracyjne kształty bez dodatkowego kodu HTML:

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

Clearfix z ::after

Klasyczny clearfix używa ::after do usuwania opływania bez dodatkowych znaczników:

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

Podpowiedź z ::after

Podpowiedź oparta wyłącznie na CSS, używająca ::after i attr():

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

Ikona z content: url()

Wstawianie małej ikony przed linkami za pomocą content: url():

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Ograniczenia pseudoelementów

Pseudoelementy nie znajdują się w DOM. Są one:

Niezaznaczalne i niewyszukiwalne przez użytkowników
Domyślnie niedostępne dla czytników ekranu
Niewybieralne za pomocą JavaScriptu

Nigdy nie należy umieszczać istotnych treści w generowanej zawartości — pseudoelementów należy używać wyłącznie do celów dekoracyjnych.

Pojedynczy a podwójny dwukropek

Pojedynczy dwukropek (:before) był składnią CSS2. Podwójny dwukropek (::before) jest standardem CSS3, który odróżnia pseudoelementy od pseudoklas. Obie składnie działają w nowoczesnych przeglądarkach, ale w nowym kodzie należy używać podwójnego dwukropka.

Które elementy obsługują ::before/::after

Elementy zastępowane (img, input, select, video) nie mogą mieć pseudoelementów, ponieważ nie mają obszaru zawartości, w którym można je wstawić. Do dekoracji należy użyć elementu opakowującego.

Szybkie sprawdzenie

Jaka wartość właściwości content jest wymagana dla dekoracyjnego pseudoelementu ::before bez widocznego tekstu?

Podsumowanie

::before i ::after wstawiają generowaną zawartość przed rzeczywistą zawartością elementu i po niej. Właściwość content jest wymagana. Należy używać ich do tworzenia dekoracyjnych kształtów, ikon, cudzysłowów i podpowiedzi — nigdy jednak do umieszczania istotnych treści, do których użytkownicy muszą mieć dostęp lub które muszą przeczytać.

Często zadawane pytania

Czy lekcja „Zawartość ::before i ::after” jest bezpłatna?

Tak — pełny tekst „Zawartość ::before i ::after” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zawartość ::before i ::after”?

Nauczy się Pan/Pani wstawiać generowaną zawartość przed elementami lub po nich za pomocą ::before i ::after oraz właściwości content. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Zawartość ::before i ::after”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy