CSS Academy · Ders

::before ve ::after İçeriği

content özelliğiyle ::before ve ::after kullanarak ögelerin öncesine veya sonrasına oluşturulmuş içerik ekleyin.

::before ve ::after İçeriği, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Sözde Öğeler Nedir?

Sözde öğeler, DOM'un parçasıymış gibi biçimlendirilen sanal öğeler oluşturur. Çift iki nokta :: kullanırlar. En sık kullanılanlar ::before ve ::after sözde öğeleridir.

::before ve ::after

::before, oluşturulan içeriği bir öğenin içeriğinin önüne ekler. ::after ise içeriği ardına ekler. Görüntülenmeleri için her ikisinde de content özelliği gerekir.

<span class="element">Text with generated content</span>

content Özelliği

content özelliği şunları kabul eder:

Bir dize: content: "text"
Boş dize: content: "" (dekoratif şekiller için yaygındır)
URL: content: url("icon.svg")
Sayaç: content: counter(step)
attr(): content: attr(data-tooltip)

Dekoratif Tırnak İşaretleri

HTML'e eklemeden tipografik tırnak işaretleri ekleyin:

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

Boş content ile Şekiller

content: "" değerini konum ve boyutlarla birlikte ayarlayarak ek HTML kullanmadan dekoratif şekiller oluşturun:

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

::after ile Kayan Öğeleri Temizleme

Klasik kayan öğe temizleme tekniği, ek işaretleme kullanmadan kayan öğeleri temizlemek için ::after kullanır:

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

::after ile Araç İpucu

::after ve attr() kullanan, yalnızca CSS ile oluşturulmuş araç ipucu:

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

content: url() ile Simge

Bağlantıların önüne content: url() kullanarak küçük bir simge ekleyin:

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Sözde Öğelerin Sınırlamaları

Sözde öğeler DOM'da bulunmaz. Şu özelliklere sahiptir:

Kullanıcılar tarafından seçilemez veya aranamaz
Varsayılan olarak ekran okuyucular tarafından erişilebilir değildir
JavaScript tarafından hedeflenemez

Temel içeriği hiçbir zaman oluşturulan içeriğe koymayın; sözde öğeleri yalnızca dekoratif amaçlarla kullanın.

Tek ve Çift İki Nokta

Tek iki nokta (:before) CSS2 sözdizimiydi. Çift iki nokta (::before), sözde öğeleri sözde sınıflardan ayıran CSS3 standardıdır. Her ikisi de modern tarayıcılarda çalışır, ancak yeni kodlarda çift iki nokta kullanın.

::before/::after Hangi Öğeleri Destekler

Değiştirilmiş öğeler (img, input, select, video) sözde öğelere sahip olamaz; çünkü sözde öğelerin ekleneceği bir içerik alanları yoktur. Bunun yerine dekorasyon için bir kapsayıcı öğe kullanın.

Hızlı Kontrol

Görünür metni olmayan dekoratif bir ::before sözde öğesi için hangi content değeri gereklidir?

Özet

::before ve ::after, oluşturulan içeriği bir öğenin gerçek içeriğinin çevresine ekler. content özelliği gereklidir. Bunları dekoratif şekiller, simgeler, tırnak işaretleri ve araç ipuçları için kullanın; ancak kullanıcıların erişmesi veya okuması gereken anlamlı içerik için asla kullanmayın.

Sıkça Sorulan Sorular

“::before ve ::after İçeriği” dersi ücretsiz mi?

Evet — “::before ve ::after İçeriği” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“::before ve ::after İçeriği” dersinde ne öğreneceğim?

content özelliğiyle ::before ve ::after kullanarak ögelerin öncesine veya sonrasına oluşturulmuş içerik ekleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“::before ve ::after İçeriği” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön