::after
Tworzy wirtualny element na końcu zawartości elementu. Idealny do strzałek, znaczków, podkreśleń i nakładek.
Przykład
#.card {
position: relative;
}
.card a::after {
content: "";
position: absolute;
inset: 0;
}
.card:hover {
outline: 2px solid #a78bfa;
}<style>
.card { padding: 14px; border-radius: 12px; background: #18181b; }
.card a { color: #fff; font-weight: 600; text-decoration: none; }
.card p { margin: 4px 0 0; color: #a1a1aa; }
</style>
<div class="card">
<a href="#">Kurs CSS od podstaw</a>
<p>Najedź gdziekolwiek na kartę: cała jest klikalnym linkiem.</p>
</div>Niewidoczny ::after linku przykrywa całą kartę, więc kliknięcie w dowolne miejsce działa jak kliknięcie w tytuł.
Definicja i zastosowanie
#Pseudoelement ::after działa jak ::before, tylko wstawia nowe dziecko na końcu treści elementu, po wszystkim, co jest w HTML. Też wymaga właściwości content i też jest domyślnie elementem liniowym.
Typowe zastosowania to znaczki za tekstem (strzałka przy linku zewnętrznym, gwiazdka przy polu wymaganym), dymki z podpowiedzią i nakładki. Pseudoelement z position: absolute i inset: 0 przykrywa cały element, co przydaje się do przyciemnienia zdjęcia albo do rozciągnięcia klikalnego obszaru linku na całą kartę.
Element może mieć jednocześnie ::before i ::after, więc dostajesz dwa dodatkowe pudełka bez dotykania HTML. Pozycjonowany ::after rysuje się nad resztą treści elementu. Jeśli nakładka zasłania tekst albo przechwytuje kliknięcia, pomogą z-index i pointer-events: none.
Składnia
#selektor::after { content: …; }Typowe zastosowania
#- Strzałka za tekstem, typowa dla linków prowadzących na inne strony.
- Tekst połączony z wartością atrybutu
data-time. Kolejne fragmenty wcontentpo prostu wypisujesz obok siebie. - Podkreślenie, które rozwija się po najechaniu. Najedź kursorem na link.
- Znaczek przypięty do rogu elementu. Rodzic potrzebuje
position: relative.
Typowe zastosowania w praktyce
#content: " ↗"
.demo::after { content: " ↗"; }content: attr(data-time)
data-time. Kolejne fragmenty w content po prostu wypisujesz obok siebie..demo::after {
content: " · " attr(data-time);
color: #a1a1aa;
}:hover::after
.demo::after {
content: "";
display: block;
height: 2px;
background: #a78bfa;
transform: scaleX(0);
transition: transform 0.25s;
}
.demo:hover::after { transform: scaleX(1); }position: absolute
position: relative..demo { position: relative; }
.demo::after {
content: "NOWE";
position: absolute;
top: -14px;
right: -30px;
padding: 1px 6px;
border-radius: 6px;
background: #f43f5e;
color: #fff;
font-size: 10px;
font-weight: 700;
}Więcej przykładów
#.tip {
position: relative;
}
.tip:is(:hover, :focus)::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
translate: -50% 0;
padding: 4px 8px;
border-radius: 6px;
background: #3f3f46;
color: #fff;
font-size: 12px;
white-space: nowrap;
}<p style="margin: 34px 0 0;">Za każdą lekcję dostajesz <span class="tip" tabindex="0" data-tip="Punkty doświadczenia" style="border-bottom: 1px dashed #a1a1aa; cursor: help;">EXP</span>.</p>Najedź na skrót EXP albo dojdź do niego klawiszem Tab. Tekst dymka pochodzi z atrybutu data-tip.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Niewidoczny
::afterzposition: absolute; inset: 0powiększa klikalny obszar linku na całego rodzica. To prosty sposób na klikalne karty. - Gdy nakładka z
::afterblokuje zaznaczanie tekstu albo kliknięcia, dodaj jejpointer-events: none. - W jednej regule możesz ostylować oba pseudoelementy naraz:
.x::before, .x::after { … }.
Powiązane hasła
#- ::beforeTworzy wirtualny element na początku zawartości elementu. Służy do ikon, ozdobników i etykiet bez dodatkowego HTML.
- contentWstawia treść generowaną w pseudoelementach ::before i ::after.
- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
- insetSkrót, który ustawia top, right, bottom i left w jednej deklaracji.
Widzisz błąd albo brakuje przykładu? Napisz do nas.