::before ve ::after gibi pseudo-elementler nedir?

Question

Accepted Answer

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 ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` `content` özelliği zorunludur — onsuz, pseudo-element render edilmez. Oluşturulan içerik, öğenin çok başında (`::before`) veya sonunda (`::after`) bir alt öğedir. ## Ekstra divler olmadan dekoratif şekiller ```css .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. ## Diğer pseudo-elementler (öğenin bir bölümünü şekillendirme) ```css 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 */ ``` ## Bir iki nokta vs iki iki nokta ```css .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). ## Erişilebilirlik notu 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. ## Neden önemli 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 `

` veya `` yoktur. Semantik markup'ı korurken zengin görsel ayrıntıları etkinleştirirler ve temiz, bakımlanabilir stil oluşturmanın temel taşıdırlar.