CSS Dersleri 30 - Pseudo-Element (Sözde Etiketler)

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Pseudo-Element (Sözde Etiketler) konusunu öğreneceğiz.

Sözde Etiketler (Pseudo-Element) nelerdir?

Bir etiketin belirtilen bölümlerine stil vermek için , CSS'de Sözde Etiketler kullanılır. Örneğin ;

• Bir etikete ait ilk harf veya satırın stilini belirlemek
• Bir etikete ait içeriğin öncesine ve sonrasına içerik eklemek

Pseudo-Element Kullanımı

Sözde elementlerin sözdizimi şu şekildedir ;

secici::sozde-element{
  ozellik:değer;
}

CSS ::first-line Kullanımı

::first-line sözde etiketi, bir metine ait ilk satıra stil atamak için kullanılır.

Aşağıdaki örnekte tüm p etiketlerinin ilk satırlarına ait biçimlendirme yapılmıştır.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

NOT : ::first-line sözde etiketi sadece blok türündeki etiketlerde çalışmaktadır.

CSS ::first-letter Kullanımı

::first-letter sözde etiketi, bir metine ait ilk harfe özel stil atamak için kullanılır.

Aşağıdaki örnekte tüm p etiketlerinin ilk harflerine ait biçimlendirme yapılmıştır.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

NOT : ::first-letter sözde etiketi sadece blok türündeki etiketlerde çalışmaktadır.

CSS ::before Kullanımı

::before sözde etiketi, bir etiketin içeriğinden önce içerik eklemek için kullanılır.

Aşağıdaki örnekte, her h1 etiketinden önce bir görsel ekler.

h1::before {
  content: url(smiley.gif);
}

CSS ::after Kullanımı

::after sözde etiketi, bir etiketin içeriğinden sonra içerik eklemek için kullanılır.

Aşağıdaki örnekte, her h1 etiketinden sonra bir görsel ekler.

h1::after{
  content: url(smiley.gif);
}

CSS ::marker Kullanımı

::marker sözde etiketi, liste elemanlarının işaretçilerini seçer ve özel stil tanımlamamızı sağlar. Liste elemanlarını temsil eden li etiketinin başındaki işaretçileri düzenlememizi sağlar.

Aşağıdaki örnek, tüm liste öğelerinin işaretçilerine stil tanımlar:

::marker {
  color: red;
  font-size: 23px;
}

CSS ::selection Kullanımı

::selection sözde etiketi, tarayıcı üzerinden herhangi bir metin seçildiğindeki durumda stil tanımlamamızı sağlar. 

::selection {
  color: red;
  background: yellow;
}