Cara Penggunaan CSS Before dan After
Cara Penggunaan CSS Before dan After - Before dan After adalah selector CSS dan salah satu cara untuk kita bisa melakukan styling di CSS. Saya akan jelaskan terlebih dahulu masing - masing selector yaitu Before dan After sebelum nanti bagaimana cara penggunaan nya.
- Before adalah selector yang berfungsi untuk menyisipkan sesuatu sebelum isi elemen yang dipilih.
- After adalah selector yang berfungsi untuk menyisipkan sesuatu setelah isi elemen yang dipilih, ini artinya kebalikan dari selector Before.
1. Kode selector Before
styling CSS;
}
2. Kode selector After
styling CSS;
}
Setelah memahami pembahasan CSS Before dan After, sekarang saya akan praktekan bagaimana cara penggunaannya. Silahkan kalian bisa ketikan kode HTML berikut untuk elemen yang akan dijadikan objek dari penggunaan Before dan After.
<ol>
<li>Mangga</li>
<li>Apel</li>
<li>Jeruk</li>
<li>Semangka</li>
<li>Anggur</li>
</ol>
</body>
Setalah dibuatkan elemen list seperti diatas, selanjutnya ketikan kode CSS berikut untuk memberikan konten tambahan sebelum dan sesudah pada isian listnya dengan selector Before dan After.
li {
margin-top: 10px;
}
/* Selector Before */
li::before {
content: "Ini Buah : ";
background: darkcyan;
padding: 5px;
color: white;
}
/* Selector After */
li::after {
content: "Segar Sekali !";
background: green;
padding: 5px;
color: white;
}
</style>
Setelah selesai diketikan silahkan kalian buka pada browser masing - masing untuk melihat hasilnya. Maka akan ada penambahan konten sebelum dan sesudah isi masing - masing listnya. Baiklah, cukup sekian pembahasan CSS tentang Cara Penggunaan CSS Before dan After, semoga pembahasan CSS ini bermanfaat. Selamat mencoba dan sampai jumpa lagi dipembahasan selanjutnya.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
