Mengenal pseudo elements ::before dan ::after pada css

Mengenal pseudo elements ::before dan ::after pada css

pseudo elements ::before dan ::after - Apasih css ::before dan ::after pada css?.

Tidak sedikit yang bertanya kepada saya kemarin di group, mas apa itu fungsi dari css ::before dan ::after dan bagaimana cara menggunakan nya atau contohnya seperti apa?.

Mungkin dari sebagian orang yang masih awam dengan html (hyper text markup language) dan css (casheading style sheet) akan merasakan kebingungan, hal ini juga sudah saya rasakan sebelumnya dan saya juga mencari informasi mengenai css ::before dan ::after saat itu.

Selain itu Css ::before dan ::after ini dinamakan Css pseudo-elements dalam bahasa umum nya, nah lantas bagai mana cara menggunakan selector pseudo-elements tersebut, kamu pun bisa memperhatikan contoh dan penggunaan Css ::before dan ::after di bawah ini:

Pengertian css ::before dan ::after (pseudo-elements)

Apa itu css ::before dan ::after?. Ya benar sesuai namanya jikalau kita artikan ke dalam bahasa Indonesia yaitu "elemen semu", antara ::sebelum (::before) dan ::sesudah (::after).
Lantas seperti apa contoh css ::before dan ::after tersebut?..

Contoh pseudo-elements ::before dan ::after

Untuk mengetahui seperti apa contoh dari pseudo elements css ::before dan ::after tersebut, untuk mengetahui lihat markup di bawah ini secara tersusun:

1. Pseudo elements ::before

Untuk caa ::after akan di bahas setelah kamu memahami css ::before ini, Yang pertama mari kita perkenalkan css pseudo elements ::before di bawah ini:
Sekarang siapkan html editor kamu dan kemudian silahkan salin dan tempelkan markup di bawah ini kedalam html editor kamu.


<style>
.kirmanalidris{
color:blue;
}
</style>
<p class="kirmanalidris">Contoh css pseudo elements ::before</p>

jika sudah di tempelkan di html editor sekarang kamu preview dan amati apa yang tampil, dan kemudian kamu simpan dalam pikiran kamu.
selanjutnya kamu tambahkan pseudo ::before dengan selector kirmanalidris bila kamu kebingungan perhatian markup di bawah ini:

<style>
.kirmanalidris{
color:blue;
}
.kirmanalidris::before{
content:"Ini adalah";
color:red;
}
</style>
<p class="kirmanalidris">Contoh css pseudo elements ::before</p>

Jika sudah selesai kamu tambahkan .kirmanalidris::before sekarang kamu amati apa yang membedakannya?.. pasti ada tulisan "Ini adalah" berwarna merah sebelum tulisan berwarna biru!.

2. Pseudo elements ::after

Nah untuk yang kedua ini adalah berlaku untuk css pseudo elements ::after, untuk pelajar seperti di atas, kamu cukup siapkan html editor kamu, dan kemudian salin dan tempelkan caa pseudo elements ::after di bawah ini pada html editor kamu:


<style>
.kirmanalidris{
color:red;
}
</style>
<p class="kirmanalidris">Contoh css pseudo elements ::after</p>

Jika sudah selesai kamu lakukan amati apa yang muncu dalam layar perangkat kamu?. Dan kemudian simpan dalam pikiran kamu. Untuk selanjutnya kamu tambahkan pseudo elements ::after pada selector kirmanalidris untuk contoh perhatikan markup di bawah ini:


<style>
.kirmanalidris{
color:red;
}
.kirmanalidris::after{
content:"Apakah kamu sudah paham?..";
color:blue;
}
</style>
<p class="kirmanalidris">Contoh css pseudo elements ::before</p>

Sesudah itu kamu perhatikan apa yang membedakannya?.

Pasti kamu melihat tulisan berwarna biru sesudah tulisan berwarna merah tersebut dan hasilnya seperti ini "Contoh css pseudo elements ::before apakah kamu sudah paham!..".

Nah kira kira itulah penjelasan sederhana dari css pseudo elements ::before dan ::after, Tapi perlu di ingat oleh kamu, kamu juga dapat menambah kan property seperti dan value yang kamu inginkan seperti:
background:, color:, width:, height:, position:, dan sebagainya karna property css itu ada banyak bahkan ratusan atau ribuan.

Kesimpulan

Intinya teruslah belajar dan belajar untuk lebih dalam lagi mengenai html css dan juga javascript, karena semua orang juga bisa menjadi apa yang mereka inginkan terhadap keinginan nya sendiri.
Jadi fokuslah Dengan tujuan apa yang kami target kan jangan dengarkan apa kata orang lain.

Saya harapkan postingan tentang css pseudo elements ::before fan ::after bisa kamu dengan mudah kamu serapi dan di mengerti, nah untuk kamu yang kebingungan kamu bisa bertanya melalui kolom komentar yang tersedia. Ingat.. malu bertanya sesat di jalan ;).

Tidak ada komentar:

Posting Komentar

MAGZPRO

Template blogger yang bersih yang di optimalkan serta valid schema markup dan cepat


Beli harga turun 95rb