{{ message }}

Trik Menyisipkan HTML Konten Melalui CSS

05/07/2017 | HTML/CSS
Trik Menyisipkan HTML Konten Melalui CSS

Terkadang mencari suatu konten tertentu sangat menyebalkan, apalagi jika konten HTML tersebut ada didalam template HTML yg Anda dapat dari internet atau bukan buatan Anda sendiri. Padahal mungkin Anda hanya ingin menambahkan sedikit konten static di antara ratusan baris kode HTML tersebut. Apalagi bagi Anda yg menggunakan CMS seperti WordPress untuk website Anda. Setiap kali Anda ingin menambah konten yg bentuknya static maka Anda harus mencarinya satu-satu di-dalam template WordPress yg biasanya bukan buatan Anda sendiri. Tapi sebenarnya ada satu trik untuk menyisipkan konten secara lebih mudah, yaitu menyisipkannya melalui CSS atau jika Anda adalah pengguna WordPress Anda tidak perlu jauh-jauh mencari HTML aslinya melalui Penyunting Anda. Akan tetapi cukup dengan membuka Lembar Gaya (CSS) lalu Anda dapat menyisipkan konten tersebut.

Pseudo Elements Before dan After

Cara untuk menyisipkan konten pada CSS adalah dengan menggunakan pseudo elements ::before dan ::after. Intinya Anda hanya perlu mencari tag yg ingin Anda jadikan patokan untuk konten yg ingin Anda sisipkan di dokumen HTML. Anda dapat menggunakan tools inspector di Web Browser Anda, misalkan Anda membuka suatu halaman web yg ingin Anda sisipkan konten di dalamnya, lalu Anda carilah posisi konten yg ingin Anda jadikan patokan. Misalnya di-dekat sebuah gambar, maka klik kanan gambar tersebut lalu pilih menu Inspect Element. Setelah itu tag htmlnya akan tertera di Inspector Tools, lalu Anda dapat mengambil tag atau selector yg ingin Anda jadikan patokan penyisipan konten tersebut. Setelah element HTML patokannya dapat, Anda dapat menulis kode sebagai berikut;

.element-patokan::before {
    content: "Konten Anda Disini";
}

Perhatikan pseudo element ::before akan menyisipkan konten “Konten Anda Disini” tepat sebelum element patokan. Jika Anda ingin menyisipkan konten tersebut setelah element patokan Anda dapat menggunakan pseudo element ::after;

.selector-anda::after {
    content: "Konten Anda Disini";
}

Tentu saja Anda dapat mengkombinasikannya dengan beberapa style CSS misal seperti ini;

.selector-anda::after {
    content: "Konten Anda Disini"; 
    position: "absolute";
    left: 100px;
    top: 100px;
}

Style diatas dapat memposisikan konten tersebut berdasarkan koordinat left dan top. Atau juga Anda ingin menyisipkan sebuah gambar, Anda dapat menggunakan style CSS misalnya seperti ini;

.element-patokan::before {
   content: "";     
   background-image: url(http://qaiserlab.com/wp-content/uploads/2016/07/css-before-after.jpg);
   display: block;
   width: 100px;
   height: 100px;
}

Trik menyisipkan gambar diatas adalah dengan cara mengosongkan text di dalam konten, lalu merubah display-nya menjadi block. Perhatikan konten yg kosong “” disini tetap dianggap ada dan dapat kita styling

Source Code Lengkap

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Pseudo Element Before/After</title>
 
    <style type="text/css">
 
    .element-patokan::before {
        content: "";
        background-image: url(http://qaiserlab.com/wp-content/uploads/2016/07/css-before-after.jpg);
        display: block;
        width: 100px;
        height: 100px;
    }
 
    </style>
  </head>
  <body>
 
    <h1 class="element-patokan">Element Patokan</h1>
 
  </body>
</html>