- Konu sahibi
- #1
CSS
En küçük çalışan örnekte üç şey bulunur: bir hedef öğe,
Bu kodu bir HTML dosyasına yerleştirdiğinizde bağlantı metninin önünde ok ve bir boşluk görünür. Ok görünmüyorsa önce seçicinin hedef öğenin sınıfıyla eşleştiğini, CSS dosyasının yüklendiğini ve
Aşağıdaki karşılaştırma, hangi yaklaşımın daha uygun olduğunu hızlıca gösterir:
Bir başlığın başına "Yeni" rozeti eklemek için aşağıdaki örnek kullanılabilir:
Başlığın başında mavi bir rozet görünmesi beklenir. Rozet görünmüyorsa
En sık hata,
Evet. Pseudo-elemente boş bir
::before, seçilen HTML öğesinin kendi içeriğinden önce görünen bir sözde öğe oluşturur. Bu içerik HTML'ye yeni bir düğüm olarak eklenmez; CSS tarafından üretilir. Görünür olması için genellikle content özelliği gerekir. Dekoratif simge, etiket, ayraç veya kısa görsel vurgu eklemek için kullanışlıdır; ana metni, önemli bilgiyi ya da erişilebilirlik açısından gerekli içeriği yalnızca ::before ile üretmek doğru değildir.Nasıl çalışır?
::before, hedef öğenin içerik akışında çocuk içeriklerinden önce konumlanır. Örneğin bir bağlantının metni "Dokümantasyon" ise ::before ile eklenen → karakteri görsel olarak metnin önünde görünür. Örneğin img gibi replaced öğelerde ::before oluşturulmaz. Pseudo-element, hedef öğenin kendisi değildir; bu nedenle JavaScript ile normal bir HTML öğesi gibi seçilip işlem yapılması beklenmemelidir.En küçük çalışan örnekte üç şey bulunur: bir hedef öğe,
::before seçicisi ve content değeri.
Kod:
<a class="external-link" href="https://example.com">Dokümantasyon</a>
<style>
.external-link::before {
content: "→ ";
color: #555;
}
</style>Bu kodu bir HTML dosyasına yerleştirdiğinizde bağlantı metninin önünde ok ve bir boşluk görünür. Ok görünmüyorsa önce seçicinin hedef öğenin sınıfıyla eşleştiğini, CSS dosyasının yüklendiğini ve
content özelliğinin yazıldığını kontrol edin. content: none veya content: normal kullanılması da üretilen içeriği kaldırabilir.Yaygın kullanım kararları
- Yalnızca görsel bir işaret ekliyorsanız
::beforekullanın. Örneğin bir etiketin başına renkli nokta veya bir bağlantının önüne dekoratif ok eklemek uygundur. - Üretilecek metni
contentile belirtin. Metin için tırnak kullanın; boş bir pseudo-element oluşturmak istiyorsanızcontent: ""yazın. - Pseudo-elementin boyut, arka plan veya konum almasını istiyorsanız
displaydeğerini açıkça belirleyin. Özellikle genişlik ve yükseklik verilen dekoratif kutulardainline-blocktercih edilebilir. - İçeriğin öğenin önünde görünmesi yeterli değilse
positionile konumlandırın. Bu durumda hedef öğeye çoğunluklaposition: relativevererek referans alanını netleştirin. - İçeriğin anlamı kullanıcı tarafından mutlaka bilinmeliyse onu HTML'ye gerçek metin olarak ekleyin.
::beforeile eklenen metin kopyalama, ekran okuyucu ve etkileşim davranışlarında normal HTML içeriğiyle aynı kabul edilmez.
Aşağıdaki karşılaştırma, hangi yaklaşımın daha uygun olduğunu hızlıca gösterir:
| İhtiyaç | Uygun yaklaşım | Neden |
|---|---|---|
| Dekoratif ok veya nokta | ::before | HTML'yi gereksiz işaretlemeyle doldurmaz |
| Kullanıcının okuması gereken uyarı | Gerçek HTML metni | Anlam ve erişilebilirlik korunur |
| Bir öğenin sonuna ek görsel içerik | ::after | İçeriği hedef öğeden sonra üretir |
Dekoratif rozet örneği
Bir başlığın başına "Yeni" rozeti eklemek için aşağıdaki örnek kullanılabilir:
Kod:
<h2 class="new-title">CSS bileşenleri</h2>
<style>
.new-title::before {
content: "Yeni";
display: inline-block;
margin-right: 6px;
padding: 2px 5px;
border-radius: 4px;
background: #2457a6;
color: #fff;
font-size: 0.75em;
font-weight: 700;
vertical-align: middle;
}
</style>Başlığın başında mavi bir rozet görünmesi beklenir. Rozet görünmüyorsa
.new-title sınıfının gerçekten h2 öğesinde bulunduğunu ve başka bir CSS kuralının display, renk veya content değerini ezmediğini inceleyin. Rozetin kendisi yalnızca görsel bir durum bildiriyorsa bu kullanım uygundur. "Yeni" bilgisi sayfanın anlamının parçasıysa aynı bilgiyi HTML içinde de erişilebilir biçimde vermek daha güvenlidir.Sık yapılan hatalar
En sık hata,
content yazmadan yalnızca .sinif::before seçicisini tanımlamaktır. İkinci hata, ::before ile hedef öğenin içine gerçek bir HTML öğesi eklendiğini sanmaktır. Pseudo-element üzerinde karmaşık alt işaretleme, form kontrolü üretme veya tıklanabilir bir düğme kurma yerine gerçek HTML kullanın. Ayrıca z-index ile katmanlama yapıldığında hedef öğenin konumlandırma ve yığılma bağlamını kontrol edin; aksi halde pseudo-element başka bir içerik tarafından örtülebilir.Kaynaklar
Sık sorulan sorular
::before ile ::after arasındaki fark nedir?
::before hedef öğenin içeriğinden önce, ::after ise sonra üretilir. İkisi de aynı content ve stil mantığıyla çalışır.::before ile bir arka plan resmi eklenebilir mi?
Evet. Pseudo-elemente boş bir
content değeri verip background-image, boyut ve konumlandırma özellikleri uygulanabilir. Ancak yalnızca dekoratif görseller için kullanılması ve gerçek bilgi taşıyan görselin uygun metinle desteklenmesi gerekir.