Pseudo Element ::before dan ::after Disertai Contoh

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.

Dalam struktur html yang di generate oleh browser (misal: chrome), posisi kedua element ini tampak seperti contoh berikut:

Contoh CSS Rule:

.fb::before {
	/* Isi Style */
}	
.fb::after {
	/* Isi Style */
}

Kode HTML:

<div>
	<a class="fb" href="#"></a>
</div>

Posisi dalam struktur DOM:

ilustrasi_posisi_pseudo_element_pada_dom

Selanjutnya ketika kita tambahkan content didalamnya, misal:

<div>
	<a class="fb" href="#">Kunjungi profil lengkap kami di Facebook</a>
</div>

Maka strukturnya akan menjadi:

ilustrasi_posisi_pseudo_element_terhadap_content

Penulisan dan Dukungan Browser

Seperti 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 ::after

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

  • String, merupakan teks seperti pada umumnya, penulisannya diapit oleh tanda kutip baik satu atau dua, misal: content: 'Element Before';
  • Keyword, merupakan kata-kata tertentu yang dapat digunakan,  penulisannya tidak menggunakan tanda kutip, misal: content: open-quote;
  • Url, merupakan alamat url dari image yang akan digunakan sebagai background, ditulis tanpa tanda kutip, misal content: url(../../img.jpg);
  • Attr, merupakan nilai attribut dari element yang ditargetkan, ditulis tanpa tanda kutip, misal: a::before {content: attr(href)}, akan mengambil nilai attribute href dari element <a>
  • Counter, merupakan urutan dari suatu element, misal ketika menggunakan element <ol> propertiesnya content: counter(li);

Berbagai jenis nilai tersebut akan kita gunakan pada contoh pada bagian bawah artikel ini.

Jenis Element

Kedua 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

<article>
	<p>Content</p>
</article>

CSS

article {
	width: 350px;
}
article p {
	border: 1px solid #CCCCCC;
	padding: 15px;
}
article::before {
	border: 1px solid #CCCCCC;
	content: "Element Before";
	padding: 15px;
}
article::after {
	border: 1px solid #CCCCCC;
	content: "Element After";
	padding: 15px;
}

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:

article p,
article::before,
article::after {
	display: inline-block;
	float: left;
	width: 80px;
	height: 80px;
	margin: 0;
	margin-right: 10px;
}

Maka, hasil yang kita peroleh:

Content

Dari contoh diatas, kode HTML yang kita gunakan juga dapat dianalogikan dengan kode HTML berikut:

<article>
	<span class="before"></span>
	<p>Content</p>
	<span class="after"></span>
</article>

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

Ketika 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 Icon

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

<a class="btn-icon" href="#">
	<span></span>Demo Single
</a>

Struktur HTML yang terbentuk:

struktur_html_button_dengan_icon

CSS : klik link ini dan pilih bagian /* Contoh 1 */

Hasil

Sample Button

*) Warna merah untuk element ::before, dan biru untuk ::after

Contoh 2: Icon Social Media

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

<a class="gplus"></a>

Struktur HTML yang terbentuk:

struktur_html_icon_social_media

CSS: klik link ini dan pilih bagian /* Contoh 2 */

Hasil:

*) Warna merah untuk element ::before, dan biru untuk ::after

Contoh 3: Pseudo element ::before dan ::after pada form

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

<form class="sample-form">
	<div class="sample-form-name">
		<input name="name" type="text" placeholder="Name:">
	</div>
	<div class="sample-form-email">
		<input name="email" type="text" placeholder="Email:">
	</div>
	<input class="button" type="submit" value="Submit">
</form>

Struktur HTML yang terbentuk:

struktur_html_form_dengan_icon_before

CSS: klik link ini dan pilih bagian /* Contoh 3 */

Hasil:

*) Warna merah untuk element ::before, dan biru untuk ::after
Form Pencarian:

Pada form input dibawah ini, icon lup dibuat menggunakan pseudo element ::after

HTML:

<form class="sample-search" method="post" action="">
	<input type="text" value="" name="s" placeholder="Search...">
	<button type="submit" value=""></button>
</form>

Struktur HTML yang terbentuk:

struktur_html_form_pencarian_dengan_icon

CSS: klik link ini dan pilih bagian /* Contoh 3-2 */

*) 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

<form class="form-validation" action="" method="post">
	<div><label>Nama *</label><input name="nama" required="" type="text"><i></i></div>
	<div><label>Email *</label><input name="email" required="" type="email"><i></i></div>
	<div><label>Url *</label><input name="url" required="" type="url"><i></i></div>
	<div><label></label><input class="button" name="submit" type="submit" value="Submit"></div>
</form>

CSS: klik link ini dan pilih bagian /* Contoh 3-3 */

Hasil

Contoh 4: CSS Style untuk radio dan checkbox

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

<div class="sample-radio-checkbox">
	<label><input name="option" type="radio">Option 1</label><br>
	<label><input name="option" type="radio">Option 2</label><br>
	<label><input name="option" type="radio">Option 3</label>
	<p>Checkbox</p>
	<label><input name="checkbox1" type="checkbox">Checkbox 1</label><br>
	<label><input name="checkbox2" type="checkbox">Checkbox 2</label><br>
	<label><input name="checkbox3" type="checkbox">Checkbox 3</label>
</div>

Struktur HTML yang terbentuk:

struktur_html_radio_checkbox

CSS: klik link ini dan pilih bagian /* Contoh 4  */

Hasil:



Checkbox:


*) Warna merah untuk element ::before, dan biru untuk ::after

Contoh 5: Membuat counter pada element list

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

<ol class="sample-list">					
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
	<li><a href="#">Link 5</a></li>
</ol>

Struktur HTML yang terbentuk:

struktur_html_pseudo_element_before_dengan_counter

CSS: klik link ini dan pilih bagian /* Contoh 5 */

Contoh hasil dengan link lengkap:

  1. Membuat, Mengedit, dan Menghapus Foreign Key (FK) Dengan phpMyAdmin
  2. Menghitung Total dan Subtotal Pada MySQL
  3. Membuat Segitiga, Persegi dan Motif dengan PHP For Loop
  4. Menjalankan perintah MySQL dengan Command Line (connect, pilih database, contoh query)
  5. Memahami If Else Dalam PHP (dan Elseif)

Nomor urut diatas dibuat menggunakan pseudo element ::before

*) Warna merah untuk element ::before, dan biru untuk ::after

Contoh 6: Membuat quote dengan pseudo element ::before dan ::after

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

<article class="sample-quote">
	<p class="sample-quote-content">Paeudo element...</p>
</article>

Struktur HTML yang terbentuk:

struktur_html_quote_dengan_before_dan_after

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

Warna merah untuk element ::before, dan biru untuk ::after

Contoh 7: Membuat tooltip dengan css menggunakan pseudo element ::before dan ::after

Contoh 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 data-tooltip 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:

<a href="#" class="tooltip" data-tooltip="Contoh tooltip dengan CSS">Contoh Link dengan tooltip</a>

Struktur HTML yang terbentuk:

struktur_html_tooltip_dengan_pseudo_element

CSS: klik link ini dan pilih bagian /* Contoh 7 */

Hasil:
Contoh link dengan tooltip

Kesimpulan

Pseudo 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 Now

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

7 Feedback dari pembaca

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com