CSS ::before ve ::after Sözde Elementleri, Örnekler…

Q: CSS'te ::before ne işe yarar?

Seçilen elementin ilk çocuğu olan ve içi content özelliğinin söylediği şeyle dolan bir sözde element oluşturur. ::after aynısını son çocuk olarak yapar. İkisi de HTML'de yoktur, bu yüzden ikonlar, etiketler ve süslemeler için kullanışlıdır.

Q: ::before ya da ::after'ım neden görünmüyor?

En yaygın neden eksik bir content özelliğidir: o olmadan sözde element üretilmez. Boş bir dekoratif kutu için content: "" kullan. Diğer nedenler: genişlik ve yüksekliği olan satır içi bir sözde element (ona display: block ya da inline-block ver) ya da onları barındıramayan veya gibi bir element.

Q: :before ile ::before arasındaki fark nedir?

Davranışta hiçbir fark yok. Çift iki noktalı ::before, sözde elementleri işaretleyen güncel söz dizimidir; tek iki noktalı :before ise tarayıcıların before, after, first-line ve first-letter için hâlâ kabul ettiği eski CSS2 yazımıdır.

Q: Ekran okuyucular CSS ::before içeriğini okuyabilir mi?

Genellikle evet: content içindeki metin çoğunlukla erişilebilir ada dahil edilir, ama seçilemez ya da kopyalanamaz. Gerçek bilgiyi HTML'de tut, sözde elementleri süsleme ve küçük görsel ipuçları için kullan.

::before ve ::after ne yapar

::before, bir elementin ilk çocuğu olarak bir kutu ekler, ::after ise son çocuğu olarak. Kutunun içine ne gireceğini content özelliği belirler. HTML'e hiçbir şey eklenmez: tarayıcı onu CSS'ten üretir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

HTML yalnızca 9 ve Tests pass içeriyor. Dolar işareti, "/ month" etiketi ve onay işaretinin hepsi CSS'ten geliyor. Yukarıdaki örneklerin yaptığı gibi sen ezmedikçe elementin stillerini (yazı tipi, renk) miras alırlar.

Söz dizimi

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

`content` değeri	Sonuç
`"text"`	Bir metin. Satır sonu için `"\A"` (`white-space: pre` ile birlikte), bir Unicode karakteri için `"\2192"` (→) kullan
`""`	Şekiller ve süslemeler için boş bir kutu
`attr(data-label)`	Elementin bir özniteliğinin değeri
`counter(step)`	Bir CSS sayacının değeri
`open-quote` / `close-quote`	Elementin diline uygun tırnak işaretleri
`none` ya da `normal`	Sözde element yok (`normal` varsayılandır)

content zorunludur. O olmadan, onlara kaç başka özellik verirsen ver ::before ve ::after hiç oluşturulmaz.

content: "" ile dekoratif şekiller

content: "" ile sözde element, boyutlandırıp renklendirebileceğin boş bir kutudur. Varsayılan olarak satır içidir ve satır içi bir kutu width ile height değerlerini yok sayar, bu yüzden ona display: block, inline-block ya da position: absolute ver:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Bir sözde elementi konumlandırmak

Elementin üzerinde ya da çevresinde duran bir süsleme için sözde elemente position: absolute, elementin kendisine position: relative ver; böylece uzaklıklar elemente göre ölçülür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Bir sözde sınıfla birleştirirken sıraya dikkat et: önce durum, sonra sözde element gelir, .link:hover::after, asla .link::after:hover değil.

attr(), bir özniteliğin değerini content içine çeker; böylece tek bir kural her elementte farklı bir metin gösterebilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Yalnızca hover ile açılan bir tooltip, klavye ve dokunmatik ekran kullanıcıları için görünmezdir. Önemli olan her şey için metni sayfaya koy ya da elemente tabindex="0" verip onu :focus ile de göster.

Sayaçlarla numaralandırma

CSS sayaçları ve ::before, sayıları elle yazmadan öğeleri numaralandırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Bir adım ekle ya da çıkar, numaralar kendiliğinden güncellenir.

::before ve ::after'ın çalışmadığı yerler

Sözde elementler elementin içine, etiketlerinin arasına eklenir. Onlar için bir içi olmayan elementler onları gösteremez:

<img>, <video>, <iframe> (değiştirilen elementler)
<input>, <select>, <textarea> (form kontrolleri) ve <br>

Bazı tarayıcılar onları bir checkbox ya da bozuk bir resim üzerinde çizer, ama bu tutarlı değildir. Bunun yerine sözde elementi bir sarmalayıcıya koy: <span class="field"><input></span> yaz ve .field::after stilini ver.

Sık yapılan hatalar

content yok. Hiçbir şeyin görünmemesinin en yaygın nedeni. content: "" ekle.
Satır içi bir sözde elementi boyutlandırmak. display: block, inline-block ya da position: absolute vermeden width ve height hiçbir şey yapmaz.
Durumla yanlış sıra. a:hover::after çalışır; a::after:hover çalışmaz.
Konumlandırılmış bir ebeveyn olmadan absolute konum. Sözde element bu durumda uzaktaki bir ataya hizalanır. Elemente position: relative ekle.
Gerçek içeriği CSS'e koymak. content içindeki metin seçilemez ya da kopyalanamaz. Bilgiyi HTML'de tut.

Sıkça Sorulan Sorular

CSS'te ::before ne işe yarar?

Seçilen elementin ilk çocuğu olan ve içi content özelliğinin söylediği şeyle dolan bir sözde element oluşturur. ::after aynısını son çocuk olarak yapar. İkisi de HTML'de yoktur, bu yüzden ikonlar, etiketler ve süslemeler için kullanışlıdır.

::before ya da ::after'ım neden görünmüyor?

En yaygın neden eksik bir content özelliğidir: o olmadan sözde element üretilmez. Boş bir dekoratif kutu için content: "" kullan. Diğer nedenler: genişlik ve yüksekliği olan satır içi bir sözde element (ona display: block ya da inline-block ver) ya da onları barındıramayan <img> veya <input> gibi bir element.

:before ile ::before arasındaki fark nedir?

Davranışta hiçbir fark yok. Çift iki noktalı ::before, sözde elementleri işaretleyen güncel söz dizimidir; tek iki noktalı :before ise tarayıcıların before, after, first-line ve first-letter için hâlâ kabul ettiği eski CSS2 yazımıdır.

img ya da input üzerinde ::before kullanabilir miyim?

Güvenilir şekilde hayır. Sözde elementler elementin içeriğinin içine eklenir; <img> gibi değiştirilen elementlerin ve <input> gibi form kontrollerinin onlar için bir içerik kutusu yoktur. Elementi bir <span> ya da <div> ile sar ve sözde elementi sarmalayıcıya koy.

Ekran okuyucular CSS ::before içeriğini okuyabilir mi?

Genellikle evet: content içindeki metin çoğunlukla erişilebilir ada dahil edilir, ama seçilemez ya da kopyalanamaz. Gerçek bilgiyi HTML'de tut, sözde elementleri süsleme ve küçük görsel ipuçları için kullan.

İlgili kavramlar