Sözde Elemanlar

Bu dersin sonunda HTML’e dokunmadan süs içerikleri ekleyebilecek ve bir elemanın yalnızca bir parçasına stil verebileceksiniz.

Sözde eleman nedir?

Durum seçicileri elemanın bir hâlini seçiyordu. Sözde elemanlar ise elemanın bir parçasını seçer: ilk satırı, ilk harfi veya önüne eklenen sanal bir kutuyu. Çift iki nokta ile yazılırlar.

p::first-line {
  font-weight: bold;
}

Eski kodlarda tek iki nokta ile yazılmış :before görebilirsiniz. Tarayıcılar geriye dönük uyumluluk için bunu da kabul eder, ama siz çift iki nokta kullanın.

::before ve ::after

Bu ikisi, elemanın içeriğinin başına ve sonuna sanal bir eleman ekler. Çalışmaları için content özelliği zorunludur.

<p class="not">Yarın okul tatil.</p>
<p class="dis"><a href="#">Bir bağlantı</a></p>

.not::before {
  content: "Not: ";
  font-weight: bold;
  color: crimson;
}

.dis a::after {
  content: " ↗";
}

Eklenen içerik HTML’de bulunmaz. Geliştirici araçlarında elemanın içinde ::before olarak görünür. Fareyle seçilemez ve kopyalanamaz.

Süs için boş içerik

En yaygın kullanım hiç yazı eklememektir. content: "" yazarsanız boş bir kutu oluşur ve ona istediğiniz biçimi verebilirsiniz. Sanal eleman satır içi çalıştığı için boyut vermeden önce display değerini değiştirin.

<h2 class="baslik">Haberler</h2>
<p class="nokta">Yeni üye kaydı başladı</p>

.baslik::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 6px;
  background-color: teal;
}

.nokta::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: limegreen;
}

Bu sayede sırf görünüm için HTML’e boş div etiketleri eklemeniz gerekmez.

Konumlandırılmış süsler

position ile birleştiğinde kutunun herhangi bir yerine süs koyabilirsiniz. HTML bölümünde gördüğünüz kalıp burada da geçerlidir: Dıştaki eleman relative, sanal eleman absolute olur.

<div class="kart">Popüler bir kart</div>

.kart {
  position: relative;
  width: 200px;
  padding: 24px;
  margin: 12px;
  border: 1px solid gray;
}

.kart::before {
  content: "★";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: gold;
  text-align: center;
  line-height: 24px;
}

attr(): Nitelikten içerik almak

content değeri, elemanın bir niteliğindeki değeri okuyabilir. data-* niteliklerini id, class ve Genel Nitelikler dersinde görmüştünüz.

<p>Sınav <span class="ipucu" data-not="Pazartesi 10.00">pazartesi</span> günü.</p>

.ipucu {
  border-bottom: 1px dotted gray;
}

.ipucu::after {
  content: " (" attr(data-not) ")";
  color: gray;
  font-size: 0.85em;
}

::first-letter ve ::first-line

Blok elemanın ilk harfini veya ilk satırını seçer. Satırın neresinde biteceği pencere genişliğine göre değişse de tarayıcı doğru kısmı bulur.

<p class="yazi">Bir varmış bir yokmuş, evvel zaman içinde, kalbur saman içinde. Dergilerde sık görülen bu düzende ilk harf büyük yazılır ve ilk satır ötekilerden ayrılır.</p>

.yazi::first-letter {
  float: left;
  font-size: 3rem;
  line-height: 1;
  margin-right: 6px;
  color: teal;
}

.yazi::first-line {
  font-variant: small-caps;
}

Diğer parçalar

• ::placeholder Form alanındaki örnek metin.
• ::selection Fareyle seçilen metin.
• ::marker Liste maddesinin işareti.

Bu seçicilerde kullanılabilecek özellikler sınırlıdır. Çoğu zaman color ve yazıyla ilgili özellikler işe yarar.

<input type="text" placeholder="Soluk örnek metin">
<p class="secin">Bu cümleyi fareyle seçin.</p>
<ul>
  <li>Kırmızı işaretli madde</li>
</ul>

input::placeholder {
  color: teal;
  font-style: italic;
}

.secin::selection {
  background-color: gold;
  color: black;
}

li::marker {
  color: crimson;
}

İçerik mi, süs mü?

content ile eklenen yazı seçilemez, arama motorları için güvenilir değildir ve ekran okuyucular bazen okur, bazen okumaz. Bu yüzden kural basittir:

• Süs ise ::before ve ::after kullanın: çizgiler, noktalar, ikonlar.
• Bilgi ise HTML’e yazın: fiyatlar, uyarılar, başlıklar.

<style>
  .not::before {
    content: "Not: ";
  }
</style>

<p class="not">Yarın tatil.</p>

<style>
  h2::after {
    content: "";
    display: block;
    height: 4px;
    background-color: teal;
  }
</style>

<h2>Haberler</h2>

Bu derste öğrendikleriniz

• Sözde elemanlar çift iki nokta ile yazılır ve elemanın bir parçasını seçer.
• ::before ve ::after için content zorunludur.
• attr() bir niteliğin değerini content içine alır.
• Süs için sözde eleman, bilgi için HTML kullanılır.