Fungsi :after dan :before dalam CSS

Halo teman-teman WebHozz apa kabar, kita bertemu lagi 🙂 oke kali ini kita akan mencoba tutorial menggunakan fungsi :after & :before yang terdapat pada CSS.

Sebelumnya kita cari tahu dulu pengertian dari :before dan :after teman-teman, nah untuk pengertiaannya sendiri kita mulai dengan :before, simple saja artinya sebelum & kalau untuk :after artinya sesudah, he..he.. kalau gitu kita coba untuk analisa penggunaannya atau fungsinya.

:before digunakan untuk menambahkan elemen sebelum elemen utama, sedangkan :after digunakan untuk menambahkan elemen sesudah elemen utama. Mudahnya :before digunakan untuk menambahkan elemen disebelah kiri sedangkan :after menambahkan elemen sebelah kanan.

Untuk penulisannya single colon ” : ” penulisan pada CSS 2 dan untuk double colon ” :: ” penulisannya pada CSS 3

/*CSS2*/
.tes:before {}
.tes:after {}

/*CSS3*/
.tes::before {}
.tes::after {}

Masih bingung teman-teman, saya akan coba berikan contoh :

<body>
    <div id="box">
        <ul>
            <li>CAMARO</li>
            <li>IMPALA</li>
            <li>FORD MUSTANG</li>
        </ul>
    </div><!--end of box-->
</body>

Kita akan coba menambahkan kata di depannya, dengan menggunakan perintah :before

<style>
        #box ul li::before{
            content: "MUSCLE CAR ";
        }
    </style>

hasilnya :

Nah sekarang coba teman-teman gunakan fungsi ::after lihat akan memberikan efek apa pada tampilan di website. Nah teman-teman WebHozz selamat mencoba.

Related posts: