Bir pseudo-element (çift iki nokta ::) bir öğenin belirli bir bölümünün stilini veya HTML'de olmayan içeriği oluşturur — ekstra markup eklemeden.
::before ve ::after — oluşturulan içerik
{
: ;
}
{
: ;
}
Bir pseudo-element (çift iki nokta ::) bir öğenin belirli bir bölümünün stilini veya HTML'de olmayan içeriği oluşturur — ekstra markup eklemeden.
{
: ;
}
{
: ;
}
content özelliği zorunludur — onsuz, pseudo-element render edilmez. Oluşturulan içerik, öğenin çok başında (::before) veya sonunda (::after) bir alt öğedir.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Bu klasik kullanımdır: oklar, badge'ler, kaplamalar, dekoratif çizgiler çizmek — HTML'i tamamen görsel öğelerden temiz tutmak.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3, pseudo-elementleri pseudo-class'larından ayırt etmek için :: kullanıma sundu (tarayıcılar uyumluluk için eski olanlarda tek iki nokta hala kabul ederler, ancak :: kullanırlar).
Oluşturulan content bazı ekran okuyucular tarafından okunur — önemli bilgileri yalnızca ::before/::after içine koymayın (bunu dekorasyon için kullanın) ve dekoratif simgeler erişilebilirlik ağacının dışında bırakmak daha iyidir.
Pseudo-elementler, simgeler, dekoratif şekiller (oklar, ayırıcılar), damla başlıklar ve sayaçlar eklemenizi tamamen CSS'te yapmanıza izin verir — ekstra <div> veya <span> yoktur.
Semantik markup'ı korurken zengin görsel ayrıntıları etkinleştirirler ve temiz, bakımlanabilir stil oluşturmanın temel taşıdırlar.