Pseudo-element nedir?

CSS'deki pseudo-element, seçiciye eklenen ve belirli bir öğenin belirli bir bölümünü, ek açıkça DOM öğeleri oluşturmadan stillendirmeye olanak tanıyan anahtar kelimedir.

En sık kullanılan pseudo-elementler şunlardır:

• ::before: Seçilen öğenin içeriğinden önce oluşturulan içeriği ekler.
• ::after: Seçilen öğenin içeriğinden sonra oluşturulan içeriği ekler.
• ::first-line: Blok öğesinin ilk satırına stil uygular.
• ::first-letter: Blok öğesinin ilk harfine stil uygular.
• ::selection: Kullanıcının seçtiği öğe kısmına stil uygular (örneğin, metni fareyle vurgularken).
• ::placeholder: <input> veya <textarea> alanlarındaki yer tutucu metne stil uygular.

::before ve ::after kullanım örneği:

div::before {
  content: "Ön Ek: "; // Zorunlu content özelliği
  color: blue;
}

div::after {
  content: " Sonek"; // Zorunlu content özelliği
  color: red;
}

::first-line ve ::first-letter kullanım örneği:

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

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Pseudo-elementler, dekoratif öğeler eklemek, içerik üretmek, metin parçalarını stilize etmek ve diğer görevleri kolaylaştırmak için kullanışlıdır, böylece HTML yapısı basitleşir. Tarihsel olarak, tek bir iki nokta (:) ile başlarlardı, ancak CSS3 spesifikasyonu, pseudo-klasslar (:hover, :focus) ile pseudo-elementleri ayırt etmek için iki nokta (::) getirdi, ancak eski pseudo-elementler için tek nokta (:) çoğu tarayıcı tarafından hâlâ desteklenmektedir. :: kullanılması önerilir.