css content, before veya after sahte elementinin içeriğinin özellikleri için kullanılır. Bu sahte elementler çok kullanılan özelliklerdir.
Aldığı parametreler:
normal : Normal
none : Değer yok.
string : İçeriğe yeni bir dize ekler.
open-quote : İçeriğe açılış tırnağı ekler.
close-quote : İçeriğe kapanış tırnağı ekler.
no-open-quote : İçerikten açılış tırnağı kaldırır.
no-close-quote : İçerikten kapanış tırnağı kaldırır.
url : İçeriğe medya dosyası ekler.
attr : İçeriğe sahip elementin herhangi bir özelliğine değer ekler.
counter : Seçilen elementin sayaç bilgisine erişerek değer ekler.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 200px;
margin-bottom: 10px;
border: 1px solid grey;
}
.one::before { content: normal; }
.two::before { content: none; }
.three::before { content: "Tasarım ve Yazılıma" }
.four::after { content:"!!!!!!!!!!!"}
.five::before { content:open-quote; }
.five::after { content:close-quote; }
</style>
<body>
<div class="one">
Dair Herşey Burada!!!!!!!!!!!
</div>
<div class="two">
Dair Herşey Burada!!!!!!!!!!!
</div>
<div class="three">
Dair Herşey Burada!!!!!!!!!!!
</div>
<div class="four">
Tasarım ve Yazılıma Dair Herşey Burada
</div>
<div class="five">
Tasarım ve Yazılıma Dair Herşey Burada!!!!!!!!!!!
</div>
</body>
</html>Html Çıktısı:
Başka bir yazımızda görüşmek üzere…
