Frontend Uğraşanının Gizli Kahramanları ::before & ::after Kardeşler
Sözde Elemanlar ile Sözde Sınıfların Ayırımına Dikkat!
::before & ::after, bir web sayfasının DOM’unda yer almayan, yani HTML kodları içerisinde fiziksel olarak bulunmayan fakat, CSS aracılığıyla sayfanın ön yüzünde görülen sözde (sahte) HTML elemanlarıdır.
En basit şekliyle girdisi ve çıktısı aşağıdaki gibidir;
HTML:
<div>Batu </div>CSS:
div::before {
content:"Hoş geldin ";
}
div::after {
content:"bebek.";
}GÖRÜNÜM:
Hoş geldin Batu bebek.
Default kullanımdaki şekli gereği ::before, seçilen elemanın önüne, ::after ise seçilen elemanın sonuna eklenir.
:before, :after ? ::before, ::after ?
Tek “:” ile çift “::” kullanım şekline bir çok yerde denk gelmiş fakat ikisi arasındaki farka pek de kafa yormamış olan arkadaşlar, bu bölüm sizin için:)
Yazının alt başlığında dikkat çekmeye çalıştığım “Sözde Elemanlar ile Sözde Sınıfların Ayırımı” konusuyla da ilişkili bir durum bu.
Aslında W3C konsorsiyumuna göre tek “:” ile çift “::” kullanım standartları bir birinden farklıdır ve “Sözde elemanlar (Pseudo-elements)” ile Sözde Sınıfları (Pseudo-classes) birbirinden ayırır.
Sözde elemanların (Pseudo-elements) kullanım şekli şöyle olmalıdır;
::after
::before
::first-letter
::first-line
::selection
::backdrop
::placeholder
…vs.
Sözde sınıfların (Pseudo-classes) kullanım şekli şöyle olmalıdır;
:hover
:active
:focus
:checked
:disabled
:first-child
:last-child
:last-of-type
…vs.
Modern web tarayıcıları tarafından şımartılmış biz kod yazarları, nasıl yazarsak yazalım istediğimiz sonuca ulaştığımız için bu standartları çoğu zaman çiğneyip geçiyoruz. Mesela Chrome çıkıp “Ben artık W3C standartları dışında yazılan kodları doğru yorumlamayacağım” dese, hepimiz :before yerine ::before demek zorunda kalacaktık. Şu anda modern web tarayıcıların tümü, iki kullanımı da desteklemektedir.
Eski tarayıcıların bazıları (mesela IE8, Opera <7) çift kullanımı desteklemediği için :before kullanılması gerekiyordu.
CSS nezdinde ::before & ::after’ın diğer HTML elemanlardan çok da farkı yoktur.
CSS ile bir “<div>” tagini nasıl şekillendirebiliyor veya nasıl pozisyonlandırabiliyorsanız, bu iki sahte seçiciye de aynı şekilde stiller atayabilirsiniz.
::before & ::after’ı genellikle şu ihtiyaçlarımız için kullanabiliriz;
1. CSS Text Manipülasyonları İçin ::before, ::after
DOM’da yer almayan fakat bazı statik kalıp kelimelerin, sadece CSS kullanılarak üretilebileceği durumlar. Örnek;
HTML:
<div class="demo">
<a href="#">
<img src="data:image/jpeg;base64..." alt="">
</a>
</div>CSS:
.demo{
width:728px;
position:relative;
margin:40px auto;
border-top:solid 1px #ddd;
border-bottom:solid 1px #ddd;
padding:10px 0;
}
.demo::before {
content:"REKLAM";
position:absolute;
width:auto;
top:-8px;
left:50%;
margin-left:-25px;
padding:0 10px;
font-size:12px;
color:#999;
text-align:center;
background:#fff;
}GÖRÜNÜM:
2. Float Kullanımından Kaynaklanan Kapsama Problemini Çözmek İçin ::before, ::after
Bir konteyner elemanın, alt elemanlarında float (left/right) kullanımı varsa, konteyner eleman klasik kapsama problemi yaşar. Bu problemi aşmanın en pratik yolu yine ::before, ::after kullanımıdır.
3. HTML Elemanlarına Icon Veya Imaj Eklemek İçin ::before, ::after
HTML:
<div class="user">Kullanıcı Girişi</div>CSS:
.user{
position:relative;
padding-left:50px;
line-height:40px;
height:40px;
font-size:2rem;
}
.user::before {
content:"";
position:absolute;
left:0;
width:40px;
height:40px;
margin-right:10px;
background: url('data:image/png;base64,...) no-repeat;
}GÖRÜNÜM:
4. CSS İle Şekiller Çizmek İçin ::before, ::after
HTML:
<div>
<div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<span></span>
</div>CSS (SCSS):
body {
background: #000;
> div {
width: 600px;
height: 300px;
margin: -150px 0 0 -300px;
overflow: hidden;
background: #fef102;
border-radius: 50%;
position: absolute;
left:50%;
top:50%;
padding: 30px;
box-sizing: border-box;
&:after {
content: "";
width: 550px;
height: 250px;
background: #000;
border-radius: 50%;
position: absolute;
left: 25px;
top: 25px;
}
> div {
&:first-child {
position: absolute;
z-index: 4;
border-top: 22px solid #fef102;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 20px;
left: 50%;
top: 20px;
margin-left: -20px;
&:before {
content: "";
position: absolute;
width: 80px;
height: 90px;
border-radius: 100px 60px 100px 90px / 100px 60px 100px 90px;
background: #fef102;
top: -45px;
right: 34px;
transform: rotate(10deg);
}
&:after {
content: "";
position: absolute;
width: 80px;
height: 90px;
border-radius: 60px 100px 90px 100px;
background: #fef102;
top: -45px;
left: 34px;
transform: rotate(-10deg);
}
}
> div {
position: absolute;
width: 90px;
height: 110px;
left: 115px;
bottom: -10px;
&:before {
content: "";
position: absolute;
left: 90px;
bottom: -25px;
z-index: 2;
display: block;
width: 100px;
height: 160px;
background-color: #fef102;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(-20deg);
}
&:after {
content: "";
position: absolute;
left: 0px;
bottom: 10px;
z-index: 2;
display: block;
width: 90px;
height: 130px;
background-color: #fef102;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(-45deg);
}
}
div:last-child {
right: 115px;
transform: scaleX(-1);
left: auto;
z-index: 3;
}
}
}
}span {
position: absolute;
z-index: 4;
height: 20px;
width: 40px;
left: 50%;
top: 55px;
margin-left: -18px;
animation: batman 2s infinite;
&:before {
content: "";
position: absolute;
left: 5px;
top: 0;
width: 5px;
height: 5px;
background: #fef102;
z-index: 5;
border-radius: 50%;
}
&:after {
content: "";
position: absolute;
right: 5px;
top: 0;
width: 5px;
height: 5px;
background: #fef102;
z-index: 5;
border-radius: 50%;
}
}
GÖRÜNÜM:
Bunların haricinde, katmanlı border kullanımlarında ve lightbox overlay gibi kullanımlarda da ::before, ::after kullanımlarına sıkça rastlamaktayız.
Standart Dışı Kullanımlardaki Püf Noktaları
- ::before & ::after sözde elemanlarına position:absolute özelliği kazandıracaksak, bunların seçici elamanının, position:relative olması gerektiğini unutmamalıyız.
- ::before & ::after kullanılan classlarda content: “”; tanımlanması şarttır. Content değeri boş da olsa mutlaka tanımlanmalıdır.
- IMG elemanı için ::before & ::after uygulanamaz.
Faydalı olması dileğiyle…
