Pseudo element ::before dan ::after digunakan untuk membuat element semu (pseudo) dengan posisi sebelum dan sesudah content dari element yang ditargetkan, dikatakan semu karena element ini tidak benar-benar ada dalam struktur html, namun tetap akan digenerate oleh browser sehingga akan tetap tampak, namun ketika kita lihat source nya (view source), kita tidak akan menemukannya, meski semu, penggunaan element ini benar-benar sama seperti element real lainnya. Show
Dalam struktur html yang di generate oleh browser (misal: chrome), posisi kedua element ini tampak seperti contoh berikut: Contoh CSS Rule:
Kode HTML:
Posisi dalam struktur DOM: Selanjutnya ketika kita tambahkan content didalamnya, misal:
Maka strukturnya akan menjadi: Penulisan dan Dukungan BrowserSeperti pseudo element ::first-letter dan ::first-line, pseudo-element ::before dan ::after sudah diperkenalkan pada CSS 2, pada waktu itu penulisannya menggunakan single colon (:before dan :after), pada CSS 3, standar penulisan ditambah dengan memperbolehkan penggunaan doubel colon (::before dan ::after), penggunaan dobel colon ini hanya untuk membedakan dengan penulisan psuedo-class yang menggunakan single colon (seperti :hover, :link, dll). Pseudo element ini sudah didukung oleh mayoritas browser, baik menggunakan single colon maupun dobel colon, untuk Internet Explorer, single colon baru dapat digunakan mulai versi 8 keatas, sedangkan dobel colon mulai dapat digunakan pada versi 9+, oleh karena itu jika sobat masih mempertimbangkan penggunaan IE versi lama, gunakan single colon, jika tidak maka gunakan double colon, karena merupakan standar baru dan kedepannya akan terus digunakan. Style CSS Untuk Pseudo Element ::before dan ::afterTelah disebutkan sebelumnya bahwa meskipun element semu, pseudo element ini memiliki sifat sama seperti element real lainnya, sehingga kita dapat menerapkan berbagai properties (seperti: font-size, color, background, dll), namun satu hal yang perlu diperhatikan bahwa agar pseudo element ini dapat berfungsi sebagai semestinya, kita HARUS mendefinisikan properties content pada element tersebut meskipun nilainya kosong. Jenis nilai dari properties content adalah sebagai berikut:
Berbagai jenis nilai tersebut akan kita gunakan pada contoh pada bagian bawah artikel ini. Jenis ElementKedua pseudo element ini termasuk kategori inline element, sama seperti <span>, <i> dan lainnya, sehingga secara default tidak memiliki dimensi, dengan demikian jika ingin membuatnya memiliki dimensi, kita terlebih dahulu harus mendefinisikan display untuk element ini, bisa: block, inline-block, table, atau table-cell, contoh: HTML
CSS
Hasil: Content Jika kita tambahkan properties display dan float, serta beberapa deklarasi lainnya seperti properties untuk dimensi dan margin, sehingga kode css nya seperti ini:
Maka, hasil yang kita peroleh: Content Dari contoh diatas, kode HTML yang kita gunakan juga dapat dianalogikan dengan kode HTML berikut:
Dari ilustrasi diatas diharapkan ketika kita menggunakan pseudo element ini, sudah terbayang struktur html yang akan terbentuk, sehingga jelas style yang akan kita terapkan. Contoh penggunaan pseudo element ::before dan ::afterKetika ingin menambahkan element (tag HTML) pada dokumen HTML, yang pertama kali perlu diingat bahwa kita memiliki bonus dua element, yaitu pseudo element ::before dan ::after sehingga, pertimbangkan untuk menggunakan kedua element ini, sebelum element lainnya. Sangat banyak kondisi dimana kita dapat menggunakan kedua element ini, berikut ini beberapa contoh diantaranya, yang dengannya semoga dapat menginspirasi sobat ketika mendesain website. Di beberapa contoh terdapat pilihan (berupa checkbox) untuk menampilkan border, checkbox tersebut akan menampilkan border pada pseudo element ::before dan ::after sehingga lebih jelas mana element ::before dan mana element ::after. Contoh 1: Button Dengan IconKita sering menemui berbagai link berupa tombol dengan icon disebelah kiri, animasi pada icon tersebut biasanya aktif ketika mouse berada diatas (hover) tombol. Icon biasanya dibuat menggunakan pseudo element ::before dan ::after, berikut contohnya: HTML:
Struktur HTML yang terbentuk: CSS : klik link ini dan pilih bagian /* Contoh 1 */ Hasil Tampilkan Border*) *) Warna merah untuk element ::before, dan biru untuk ::after Contoh 2: Icon Social MediaKita sering menemui tombol icon sosial media seperti facebook, google plus, twitter, dll dengan effek beragam, seperti slide up, slide right, 3D, dll, biasanya efek-efek tersebut sering dibuat menggunakan pseudo element ::before dan ::after, contoh berikut diambilkan dari artikel Membuat 15 Efek Social Media Button Dengan CSS HTML:
Struktur HTML yang terbentuk: CSS: klik link ini dan pilih bagian /* Contoh 2 */ Hasil: Tampilkan Border*) *) Warna merah untuk element ::before, dan biru untuk ::after Contoh 3: Pseudo element ::before dan ::after pada formPenggunaan pseudo element ::before dan ::after juga sering diterapkan pada form, contoh berikut ini penggunaan pada form register (simpel), form pencarian, dan pada form login (untuk validasi). Form Register: Pada contoh berikut ini, icon pada name dan email dibuat menggunakan pseudo element ::before. HTML:
Struktur HTML yang terbentuk: CSS: klik link ini dan pilih bagian /* Contoh 3 */ Hasil: Tampilkan Border*) *) Warna merah untuk element ::before, dan biru untuk ::after Pada form input dibawah ini, icon lup dibuat menggunakan pseudo element ::after HTML: 0Struktur HTML yang terbentuk: CSS: klik link ini dan pilih bagian /* Contoh 3-2 */ Tampilkan Border*) *) Warna merah untuk element ::before, dan biru untuk ::after Form Validasi: Pada form dibawah ini, silakan isikan nama, email dan url, jika format email salah (tidak menggunakan @ dan domain) atau url salah (tidak diawali http://) maka akan muncul icon silang disebelah kanan input, jika benar akan muncul tanda centang, tanda silang dan centang ini dibuat menggunakan pseudo element ::before dan ::after. Contoh ini diambil dari artikel: CSS Pseudo Class Untuk Element Input 1CSS: klik link ini dan pilih bagian /* Contoh 3-3 */ Hasil Nama * Email * Url * Contoh 4: CSS Style untuk radio dan checkboxJika kita tidak menyukai tampilan checkbox dan radio bawaan browser, kita dapat mengubahnya dengan menambahkan beberapa style pada element tersebut, dengan bantuan pseudo element ::before dan ::after, hal ini dapat dilakukan dengan mudah. Perlu diperhatikan bahwa mungkin hasil tampilan untuk contoh ini tidak sama antara browser satu dengan yang lain. HTML: 2Struktur HTML yang terbentuk: CSS: klik link ini dan pilih bagian /* Contoh 4 */ Hasil: Option 1 Checkbox: Checkbox 1 Tampilkan Border*) *) Warna merah untuk element ::before, dan biru untuk ::after Contoh 5: Membuat counter pada element listUntuk membuat list dengan nomor urut, biasanya kita menggunakan element <ol>, namun cara ini memiliki keterbatasan, yaitu kita tidak dapat memberikan style, khusus pada nomor urut yang ada, sehingga nomor tersebut akan ditampilkan apa adanya, hal tersebut dapat diatasi dengan menggunakan pseudo element ::before, dengan menggunakan counter sebagai content nya. HTML: 3Struktur HTML yang terbentuk: CSS: klik link ini dan pilih bagian /* Contoh 5 */ Contoh hasil dengan link lengkap: Nomor urut diatas dibuat menggunakan pseudo element ::before Tampilkan Border*) *) Warna merah untuk element ::before, dan biru untuk ::after Contoh 6: Membuat quote dengan pseudo element ::before dan ::afterContoh lain yang mungkin sering kita jumpai adalah ketika membuat quote untuk suatu kalimat, yang biasanya diawali dengan karakter open-quote dan diakhiri dengan close-quote, kedua quote tersebut biasanya dibuat menggunakan pseudo element ::before dan ::after. Bentuk karakter quote berbeda beda tergantung jenis browser yang digunakan, menurut saya pribadi paling bagus di firefox. 4Struktur HTML yang terbentuk: CSS: klik link ini dan pilih bagian /* Contoh 6 */ Pseudo element ::before dan ::after merupakan fitur yang powerfull karena dengannya kita tidak perlu menambahkan element ke dokumen HTML, cukup mendefinisikannya pada CSS, sehingga ketika terjadi perubahan struktur pada website kita, kita tidak perlu mengubah begitu banyak kode Tampilkan Border*) Warna merah untuk element ::before, dan biru untuk ::after Contoh 7: Membuat tooltip dengan css menggunakan pseudo element ::before dan ::afterContoh selajutnya adalah pembuatan tooltip, seperti telah disebutkan sebelumnya, dengan memanfaatkan content:attr kita dapat mendapatkan isi content sesuai dengan element HTML yang kita targetkan, berikut ini contoh tooltip yang dibuat menggunakan pseudo element ::before dan ::after. Link dengan tooltip: Untuk mebuat tooltip dari link, kali ini  kita menggunakan attribut 1 sebagai teksnya, sobat dapat menggunakan attribute lain seperti title, namun perlu diperhatikan bahwa penggunaan attribut title akan membuat browser menampilkan tootltip tersendiri, sehingga akan muncul dua tooltip, dari browser dan yang kita buat, keculai kita membuatnya dengan javascript.HTML: 5Struktur HTML yang terbentuk: CSS: klik link ini dan pilih bagian /* Contoh 7 */ Hasil: KesimpulanPseudo element ::before dan ::after sangat membantu kita dalam penggunaan element HTML, karena kita tidak perlu menuliskannya pada tag html, sehingga ketika terjadi perubahan, kita cukup mengedit file css nya, tidak perlu mengedit semua file html yang ada. Demikian tutorial mengenai pseudo element ::before dan ::after, semoga bermanfaat. Salam JWD. Subscibe NowSuka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun. Apa perintah HTML untuk membuat teks atau tulisan bergaris bawah?Membuat Garis Bawah pada Teks
Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau juga tag <ins> (insert).
Apa itu text decoration?Text Decoration
Properti text-decoration adalah properti untuk memberikan dekorasi garis pada teks. Contohnya seperti garis bawah, garis atas, dan garis di tengah (teks tercoret).
Apa itu CSS text?CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
|