CSS Sözde Elemanlar Nedir ve Nasıl Kullanılırlar?
CSS sözde elemanlar hayali elemanlardır. (X)HTML hiyerarşisi içinde bu elemanlar yoktur. Dört adet sözde eleman seçicisi vardır. Bunlar; first-letter, first-line, before ve after sözde elemanlarıdır.
first-letter Elemanı
Bir blok-level elemanın ilk harfine stil ataması yapmak için kullanılır.
Bunu bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
h1:first-letter {
font-size: 200%;
}
</style>
</head>
<body>
<h1>Başlık</h1>
</body>
</html>
Yukarıdaki kodun ekran çıktısına baktığımız zaman “Başlık” yazsının ilk harfi olan “B”nin diğer harflerden daha büyük olduğunu göreceksiniz.
first-line Elemanı
Bir metnin ilk elemanına stil atamak için kullanılır.
Bunu bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
p:first-line {
color: red;
}
</style>
</head>
<body>
<p> İlk satır <br> İkinci satır <br> Üçüncü satır </p>
</body>
</html>
Yukarıdaki kodun ekran çıktısına baktığımız zaman “İlk satır” yazsının kırmızı renkle diğer satırların normal siyah renkle yazıldığını göreceksiniz.
before ve after Elemanları
Bir elemanın öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır. Bunu yapmak için “content“ özelliği kullanılır.
Notlarımızın başına otomatik olarak Not ve sonuna Bitti yazmak için aşağıdaki örneğimize bakalım.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>63
<title>CSS'in yapısı</title>
<style type="text/css">
p.not:before {
content: "Not:";
font-weight: bold;
}
p.not:after {
content: "Bitti.";
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="not">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec facilisis pretium leo. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Aliquam facilisis. Maecenas
hendrerit. Integer suscipit. Curabitur pede metus, commodo ut, lobortis
vitae, venenatis in, leo. Mauris a dui. Cras pretium. Donec porta, odio et
suscipit fringilla, purus enim auctor nulla, ultricies fringilla nisi lorem et
mi. Praesent cursus. </p>
</body>
</html>
Yukarıdaki kodun ekran çıktısına baktığımız zaman paragrafın başında “Not”” ve sonunda “Bitti” yazsını göreceksiniz.
CSS sözde elemanlar konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
