Cara Penggunaan CSS Before dan After

27/10/2019    Risman Hakim    55     Website

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

::before {
    styling CSS;

2. Kode selector After

::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.

<body>
    <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.

<style>
    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.

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More