Yükleniyor...

CSS Pseudo-öğeler

Pseudo-sınıflar bir durum değişince görünümü değiştirir (:hover, :focus). Pseudo-öğeler bir adım ötedir: metnin bir parçasını stillendirebilir veya gerçek içeriğin önüne/arkasına küçük bir kutu koyabilirsiniz — çift iki nokta (::) ile, HTML’de ekstra etiket olmadan.

Pseudo-öğe ne demek?

Pseudo-öğe, seçiciye :: ile yapışan bir sözcüktür. Markup’ta tam öğe olmayan bir şeyi hedefler: ilk harf, ilk satır veya içerikten önce/sonra üretilmiş kutu. ::before ve ::after için çoğu zaman görünür bir şey için content gerekir.

Dört sık kullanılan pseudo-öğe

Önce bunlarla başlayın. Tek iki noktalı eski biçim (:before) birçok tarayıcıda hâlâ çalışır — yine de modern çifti yazın.

📊 Günlük CSS pseudo-öğeleri

Pseudo-öğe Neyi stillendirir Örnek
::before Öğenin içeriğinden önceki kutu p::before
::after Öğenin içeriğinden sonraki kutu a::after
::first-letter Metin bloğunun ilk harfi p::first-letter
::first-line Metin bloğunun ilk satırı p::first-line

İçerikten önce — ::before ve content

::before, gerçek metinden önce sanal bir kutu oluşturur. Neredeyse her zaman content koyarsınız — bir dize veya boş süs kutusu için "".

Önce — açılış tırnağı

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

content’i unutmayın

content olmadan birçok ::before/::after kuralı hiçbir şey göstermez. Renkli şerit veya arka plan ikonu için content: "" yeter.

İçerikten sonra — ::after

::after aynı fikir, içeriğin sonrası — birim, rozet veya küçük sonek için.

Sonra — dış bağlantı ipucu

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

Gerekli anlamı buraya saklamayın

Ekran okuyucular ve bazı araçlar üretilmiş içeriğe tutarsız davranır. Önemli yönergeleri yalnızca ::before/::after içine koymayın; gerçek metin HTML’de kalsın.

İlk harf — ::first-letter

::first-letter bir metin bloğunun ilk harfini stillendirir — paragraf başındaki klasik büyük harf görünümü.

İlk harf — daha büyük açılış karakteri

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

İlk satır — ::first-line

::first-line yalnızca ilk görünen satırı stillendirir — «ilk cümle» değil, tarayıcının satır kaydırırken oluşturduğu satır.

İlk satır — biraz daha kalın

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

Boş süs kutusu

Bazen yalnızca metinsiz renk şeridi istersiniz. content: "" yeter.

Boş before — süs şeridi

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

İyi alışkanlıklar

  • Pseudo-öğe = çift iki nokta (::before); pseudo-sınıf = tek (:hover)
  • Görünür olsun diye ::before/::after üzerine content koyun
  • Gerekli metni HTML’de tutun, yalnızca üretilmiş içerikte değil
  • ::first-letter ve ::first-line metin bloklarında çalışır
  • Eski :before çalışsa bile modern :: tercih edin

Kendiniz deneyin

  1. Kısa sayfa: .quote paragraf, .lead paragraf, a.external bağlantı, metinli .card.
  2. .quote::before { content: "“"; color: #0f766e; } ekleyin ve tırnağı görün.
  3. class external bağlantıda a.external::after { content: " ↗"; }.
  4. .lead::first-letter’i büyütün ve teal yapın; .lead::first-line’a font-weight: 600.
  5. Üst şerit için .card::before { content: ""; display: block; height: 4px; background: #0f766e; }.

Sık hatalar

  • :hover gibi bir durum isterken :before yazmak — durum tek iki nokta; üretilmiş kutu çift
  • content unutup hiçbir şeyin görünmemesi
  • Bir uyarının tek kopyasını yalnızca ::after’a koymak
  • Boş veya yalnızca görsel öğede ::first-letter mucizesi beklemek
  • ::first-line’ı «ilk cümle» sanmak — satır kırılımı karar verir

Özet

  • Pseudo-öğeler :: ile bir parçayı veya üretilmiş kutuyu stillendirir
  • ::before/::after için content (dize veya "") gerekir
  • ::first-letter ve ::first-line metin bloğunun başını alır
  • Kritik anlam HTML’de kalır
  • Tek iki nokta = pseudo-sınıf; çift = pseudo-öğe
  • Tırnak, bağlantı soneki ve lead paragrafıyla pratik yapın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders