Css derslerimize kaldığımız yerden devam ediyoruz.Bu derste seçtiğimiz bir objenin arkasına ve önüne bir obje yerleştirmemizi sağlayan
before ve
after ı anlatacağım.After objenin sonuna Before ise önüne yerleştirir.
Dikkat etmemiz gerek bir kaç husus vardır.Bunlardan ilki
content ile içerik girmeliyiz.Bunu gelecek derste detaylı anlatacağım.İçerik girmezsek gözükmeyeceklerdir.İkincisi ise eklediğimiz objeler
inlinedir.Bunu blocaka display ile dönüştürüp çeşitli şeyler yapabiliriz.Şimdi kullanımına geçelim.
seçici:after{ //arkası
content:"";
//işlem
}
seçici:before{ //önü
content:"";
//işlem
}
Kalıp bu şekilde.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
.kutu{width:200px;height:200px;background:red;margin:auto;margin-top:50px;position:relative;color:#fff;}
.kutu:after{display:block;content:"Arkası";width:100px;height:100px;background:blue;position:absolute;left:225px;top:50px;}
.kutu:before{display:block;content:"Önü";width:100px;height:100px;background:blue;position:absolute;left:-125px;top:50px;}
p{text-align:center;}
p:after{content:" Arkası";color:red;}
p:before{content:"Önü ";color:red;}
</style>
</head>
<body>
<p>Metin</p>
<div class="kutu"></div>
</body>
</html>
Görüntüsü :
İlk objemizde hiç bir şey yapmadan önüne ve arkasına metin yerleştirdik.Diğerinde ise block element yapıp pozisyonlandırmalar yaptık.Before ve After şuan tüm tarayıcılar tarafından destekleniyor.
UstaDerslik
