::before i ::after w CSS — magia, której nie doceniamy

Jeśli pracujesz ze stronami internetowymi, pewnie nieraz zastanawiałaś się, jak dodać subtelny akcent graficzny bez dokładania kolejnego <div> w kodzie. Albo jak stworzyć ozdobną linię pod nagłówkiem, ikonkę przed tekstem czy delikatny cień pod tytułem – bez rozwalania struktury HTML.

Brzmi znajomo?
To właśnie moment, w którym na scenę wchodzą pseudoelementy CSS – ::before i ::after.

Dwa małe magiczne narzędzia, które potrafią zrobić ogromną różnicę w wyglądzie strony.
To właśnie dzięki nim możesz:

• dodać tło, ikonę, ozdobnik, ramkę lub animację,
• bez ingerowania w HTML,
• bez instalowania dodatkowych wtyczek,
• i bez bałaganu w kodzie.

W tym artykule pokażę Ci jak działa ::before i ::after, jak ich używać, na co uważać i jakie efekty możesz osiągnąć – od prostych akcentów po eleganckie animacje.

Czym są pseudoelementy before i after

::before i ::after to tzw. pseudoelementy – czyli elementy, które nie istnieją w kodzie HTML, ale możesz je wygenerować i wystylizować w CSS.

• ::before pojawia się przed treścią danego elementu,
• ::after – po treści.

To genialne rozwiązanie, kiedy chcesz coś ozdobić, dodać lub podkreślić, a nie chcesz dotykać HTML-a.

Przykład:

.element::before {
  content: "";
  display: block;
  width: 30px;
  height: 4px;
  background: #0444ac;
}

I już masz ozdobną linię nad tekstem — bez żadnego nowego znacznika w kodzie.

Dlaczego warto znać pseudoelementy before i after

Kiedy tworzysz strony, każda linijka HTML ma znaczenie. Im mniej kodu, tym:

• szybsze ładowanie strony,
• lepsze SEO,
• mniej chaosu przy edycji.

Dlatego profesjonalistki (takie jak Ty) wiedzą, że część rzeczy można zrobić czysto w CSS. Zamiast dokładać „ozdobne divy” albo tworzyć niepotrzebne klasy, wystarczy pomyśleć:

Czy to, co chcę zrobić, da się osiągnąć za pomocą ::before lub ::after?

W 8 na 10 przypadków odpowiedź brzmi: tak!

Najważniejsza zasada: content

Pseudoelement nie istnieje, dopóki nie dasz mu zawartości.
Nawet jeśli ma być pusty – potrzebujesz content: "".

To jak fundament.
Bez tego CSS może być idealny, ale nic się nie pojawi.

Błąd:

h2::after {
  width: 50px;
  height: 3px;
  background: #2be1e8;
}

Nic nie zadziała.

Poprawnie:

h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #23f2fb;
  margin: 10px auto 0;
}

I nagle masz subtelną linię pod nagłówkiem.
Minimalny kod, maksymalny efekt.

Przykład 1: ozdobna linia pod nagłówkiem

To klasyk.
Elegancka linia, która podkreśla nagłówki i dodaje projektowi profesjonalizmu.

h2 {
  position: relative;
  text-align: center;
  font-size: 2rem;
  color: #0444ac;
}

h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #23f2fb;
  border-radius: 2px;
}

Efekt: prosta, nowoczesna linia, którą możesz dostosować do swojej kolorystyki.
Zero dodatkowych divów. Czysto i elegancko.

Przykład 2: ikonka przed tekstem

Masz listę i chcesz, żeby wyglądała „bardziej Twoja”?
Zamiast standardowych kropek – zrób własne znaczniki CSS-em:

ul li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #23f2fb;
  border-radius: 50%;
  margin-right: 10px;
}

Albo:

ul li::before {
  content: "✔";
  color: #0444ac;
  margin-right: 8px;
}

Drobny detal, a cała lista wygląda profesjonalnie i spójnie z Twoim brandem.

Przykład 3: efekt podkreślenia lub „markera” pod tekstem

To jeden z moich ulubionych efektów.
Zamiast gradientu, po prostu podłóż półprzezroczyste tło.

h1 {
  position: relative;
  color: #0444ac;
  z-index: 1;
}

h1::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 40%;
  background: #23f2fb;
  z-index: -1;
}

Efekt?
Wygląda, jakbyś zaznaczyła tytuł markerem – nowocześnie, estetycznie i zero kombinowania z HTML-em.

Przykład 4: animacja hover na przycisku

Kiedy chcesz, żeby Twój przycisk „żył”, ::after może dodać subtelny błysk lub przesuwające się światło:

button {
  position: relative;
  padding: 12px 30px;
  background: #0444ac;
  color: #fff;
  border: none;
  overflow: hidden;
  cursor: pointer;
}

button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.4s ease;
}

button:hover::after {
  left: 0;
}

Efekt?
Subtelny błysk, który przechodzi przez przycisk.
Wygląda jak coś z drogiego szablonu premium, a to tylko kilka linijek CSS.

Typowe błędy

Nie byłabym sobą, gdybym nie dorzuciła sekcji o błędach, które widzę non stop:

1. Brak content – pseudoelement nie istnieje, jeśli nie ma zawartości.
2. Brak position: relative w elemencie głównym – before/after nie mają się do czego odnieść.
3. Nieprawidłowy z-index – efekt ląduje pod lub nad czymś nie tam, gdzie trzeba.
4. Zbyt duże kombinacje. Pseudoelementy to dekoracja, nie fundament layoutu.

Kiedy NIE używać before/after

Są sytuacje, w których nie warto się na to porywać.

• Kiedy to, co chcesz dodać, jest treścią (np. tekst, link, element dostępnościowy).
• Kiedy chcesz zbudować strukturę – do tego jest HTML.
• Kiedy efekt ma znaczenie dla SEO lub screen readerów – pseudoelementy nie są czytane przez przeglądarki asystujące.

Zasada jest prosta:

Treść = HTML
Dekoracja = CSS

I na koniec…

Pseudoelementy ::before i ::after to jedne z najbardziej niedocenianych elementów CSS.
Pozwalają tworzyć subtelne, estetyczne efekty, bez niepotrzebnego kodu i kombinacji.

Więc następnym razem, zanim dopiszesz kolejny div albo wtyczkę „dla ozdoby” – pomyśl o ::before i ::after. Bo często te dwa małe pseudoelementy wystarczą, żeby Twoja strona wyglądała, jakby wyszła spod ręki agencji za 10 tysięcy.