webheryerde.com

CSS pseudo elementler, HTML elemanlarının belirli kısımlarını stilize etmek için kullanılır. En yaygın kullanılanları ::before ve ::after’dır. Bu pseudo-elementler, bir elemanın içeriğinin önüne veya arkasına içerik eklemek için kullanılır.

CSS before ve after Kullanımı

.example::before {
  content: "Önceki içerik - ";
  color: blue;
}

.example::after {
  content: " - Sonraki içerik";
  color: red;
}

Bu örnekte, .example sınıfına sahip bir elemanın içeriğinin önüne ve arkasına metin eklenmiştir. Bu, özellikle dekoratif amaçlar veya belirli stil efektleri için kullanılabilir.

Ayrıca bunlardan başka pseudo elementlerde vardır.

::first-letter: Bir paragrafın ilk harfini stilize etmek için kullanılır.

p::first-letter {
    font-size: 2em;
    color: red;
}

::first-line: Bir paragrafın ilk satırını stilize etmek için kullanılır.

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

::selection: Kullanıcı tarafından seçilen metni stilize etmek için kullanılır.

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

Bu pseudo elementler, web sayfalarınızda daha detaylı ve özelleştirilmiş stiller oluşturmanıza yardımcı olabilir. Daha fazlası için takipte kalmaya devam edin.