Pseudo-element

Sebagian bagian halaman tidak memiliki elemen sendiri, misalnya baris pertama sebuah paragraf atau penanda dekoratif di depan label formulir. Pseudo-element (pseudo-element) memungkinkan bagian itu ditata dengan membuat kotak virtual pada pohon render (render tree), termasuk membangkitkan konten baru melalui properti content. Topik ini membahas ::before dan ::after, pseudo-element lain yang sering digunakan, perbedaan penulisan satu dan dua titik dua, serta batasan yang menyertainya.

Posisi ::before dan ::after pada pohon render#

Pseudo-element ::before menyisipkan kotak sebagai anak pertama sebuah elemen, sedangkan ::after menyisipkan kotak sebagai anak terakhirnya. Keduanya berperilaku seperti elemen sungguhan pada layout, mengikuti alur normal, dan dapat diberi properti tampilan layaknya elemen lain. Bagian berikut memperlihatkan posisi ketiga kotak tersebut di dalam satu elemen.

Perbedaan penulisan satu titik dua dan dua titik dua adalah urusan sejarah sintaks. Spesifikasi CSS memperkenalkan dua titik dua agar pseudo-element mudah dibedakan dari pseudo-class, sehingga bentuk modern yang benar adalah ::before dan ::after. Browser tetap menerima bentuk lawas :before dan :after dengan satu titik dua demi kompatibilitas, tetapi gaya penulisan baru sebaiknya konsisten memakai dua titik dua.

Properti content yang wajib#

::before dan ::after tidak menghasilkan apa pun tanpa properti content, karena nilai bawaan normal tidak membangkitkan kotak. Properti ini menerima teks dalam tanda kutip, string kosong "", fungsi attr() untuk mengambil isi atribut, serta nilai lain seperti url(). String kosong adalah bentuk yang paling sering dipakai untuk dekorasi murni, sebab kotaknya tetap lahir dan gaya seperti lebar serta latar tetap berlaku.

h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background-color: #0b5394;
  margin-bottom: 8px;
}

Kotak garis aksen di atas tidak menambahkan satu elemen pun pada dokumen, tetapi tampil sebagai blok kecil di atas setiap h2. Pendekatan yang sama dipakai untuk pembungkus dekoratif, penanda kutipan, dan pembatas antarbagian yang tidak memiliki makna teks. Manfaatnya terasa ketika judul diperbanyak, karena aksen ikut muncul tanpa penyesuaian markah.

Ukuran kotak dekorasi juga mengikuti alur normal, sehingga display: block diperlukan bila garis aksen harus berdiri sendiri. Tanpa pengaturan itu, kotak hasil ::before menjadi inline dan lebar beserta tinggi yang ditetapkan tidak berpengaruh penuh. Perilaku ini sering menjadi sumber kebingungan ketika dekorasi tampak menyusut, padahal penyebabnya sekadar jenis kotaknya. Panel Styles di DevTools memperlihatkan kotak semu tersebut beserta gaya yang berlaku padanya.

Penanda konten wajib dan teks dari atribut#

Pembangkitan konten juga berguna untuk penanda yang berulang, misalnya tanda bintang pada label formulir yang wajib diisi. Markah tetap bersih, sedangkan penandanya dijamin konsisten di seluruh formulir karena berasal dari satu aturan. Penyesuaian massal pun mudah dilakukan, misalnya mengganti warna seluruh tanda dengan menyunting satu aturan.

<label for="nama" class="wajib">Nama lengkap</label>
<input id="nama" type="text" name="nama">

label.wajib::after {
  content: " *";
  color: #b3261e;
  font-weight: 600;
}

Fungsi attr() melengkapi teknik ini dengan menyalin isi atribut elemen ke dalam konten yang dibangkitkan, sehingga teks pelengkap dapat mengikuti data yang sudah ada pada markah tanpa penulisan ganda.

.abjad::after {
  content: " (" attr(data-singkatan) ")";
  color: #52606d;
}

Teknik ini paling bernilai pada formulir besar. Tanda bintang yang berasal dari satu aturan tidak mungkin terlewat pada satu label dan terlupa pada label lain, sebagaimana sering terjadi ketika penandanya ditulis manual pada markah. Hasil akhirnya adalah penanda yang selalu sinkron dengan data karena sumbernya sama.

Satu batasan tetap berlaku pada teknik ini. Tanda bintang saja tidak menjelaskan maknanya bagi pembaca layar, sehingga keterangan wajib isi tetap perlu ditulis sebagai teks markah, misalnya kalimat penutup pada formulir. Konten pembangkitan adalah pelengkap visual dan tidak menggantikan keterangan yang bermakna. Aturan yang sama berlaku untuk teks pelengkap apa pun yang nilainya penting bagi tugas pengguna.

Pseudo-element lain yang sering digunakan#

Pseudo-element tidak berhenti pada ::before dan ::after. Pseudo-element ::first-line menata baris pertama sebuah blok teks, sedangkan ::first-letter menata huruf pertamanya, dan keduanya lazim untuk gaya tipografis seperti huruf kapital pada pembuka paragraf. Pseudo-element ::selection menata teks yang sedang dipilih pengguna, sedangkan ::placeholder menata teks petunjuk pada input, dan ::marker menata penanda butir pada daftar.

::selection {
  background-color: #0b5394;
  color: #ffffff;
}

input::placeholder {
  color: #8595a6;
  font-style: italic;
}

p::first-line {
  font-variant: small-caps;
}

Pseudo-element ::marker menutup daftar ini dengan jangkauan pada penanda butir, sehingga warna dan ukuran titik atau angka dapat diatur tanpa menggeser teksnya. Sebagaimana pseudo-element lain, cakupan propertinya terbatas pada penataan yang tidak mengubah struktur dokumen. Uji setiap pseudo-element pada elemen targetnya karena sebagian hanya berlaku untuk jenis elemen tertentu. Daftar lengkapnya dapat ditelusuri pada referensi di akhir topik.

Kelompok pseudo-element ini menjangkau bagian yang memang tidak memiliki elemen, sehingga tidak ada padanan selector biasa. Cakupan properti yang boleh diterapkan pada bagian tersebut lebih terbatas dibanding elemen utuh, misalnya ::first-line hanya menerima properti tipografi dan warna. Perilaku serupa berlaku pada pseudo-element lain yang batasannya ditetapkan spesifikasi.

Batasan pseudo-element#

Satu elemen hanya dapat memiliki satu ::before dan satu ::after, sehingga dua dekorasi pada posisi yang sama tidak mungkin dilakukan tanpa elemen pembantu. Konten yang dibangkitkan juga bukan bagian dari pohon dokumen, sehingga tidak dapat dijangkau JavaScript melalui API DOM dan tidak konsisten dibacakan oleh pembaca layar (screen reader). Aturan ::before dan ::after tidak berlaku pada elemen pengganti (replaced element) seperti img, input, dan iframe karena elemen tersebut tidak memiliki anak.

Dari sudut pandang pembacaan mesin, konten pembangkitan hanya hidup pada lapisan penyajian. Alat pengambil teks, penerjemah, dan pembaca berkas sederhana tidak melihatnya, sehingga halaman tetap harus bermakna tanpa gaya. Kaidah praktisnya mudah diingat, yaitu konten pembangkitan boleh hilang tanpa membuat informasi hilang.

Kesalahan umum#

Kesalahan pertama adalah lupa properti content, sehingga aturan ::before atau ::after tampak tidak berpengaruh sama sekali. Perbaikannya sederhana, yaitu menyertakan content dengan string kosong apabila tujuannya dekorasi kotak, atau dengan teks apabila tujuannya penanda. Kasus ini paling sering muncul ketika aturan disalin dari sumber yang memotong baris content-nya.

Kesalahan kedua adalah mengharapkan ::before tampil pada elemen pengganti. Menulis img::before atau input::after tidak menghasilkan apa pun karena elemen tersebut tidak punya anak pada pohon render. Bungkus elemen itu dengan figure atau span, lalu pasang pseudo-element pada pembungkusnya.

Kesalahan ketiga adalah memakai content sebagai sumber teks utama halaman. Selain tidak terbaca pembaca layar secara konsisten, teks pembangkitan juga tidak muncul saat halaman dicetak tanpa gaya dan tidak terindeks sebagai konten. Teks yang bermakna tetap harus ditulis pada markah.

Kekeliruan teknis yang sering menyertai adalah menulis spasi sebelum pseudo-element, misalnya h2 :before. Tanda spasi dianggap kombinator descendant, sehingga aturan itu mencari pseudo-element pada anak di dalam h2 dan bukan pada h2 sendiri. Tulis tanpa spasi, yaitu h2::before, agar targetnya tepat.

Ringkasan#

• ::before dan ::after menyisipkan kotak virtual sebagai anak pertama dan anak terakhir sebuah elemen, lengkap dengan properti content yang wajib.
• String kosong "" dipakai untuk dekorasi murni, teks berkutip untuk penanda, dan attr() untuk menyalin isi atribut.
• Pseudo-element lain seperti ::first-line, ::selection, dan ::placeholder menjangkau bagian yang tidak memiliki elemen sendiri.
• Konten pembangkitan bukan bagian pohon dokumen, tidak dijangkau DOM, dan tidak berlaku pada elemen pengganti, sehingga hanya tepat untuk pelengkap dan dekorasi.

Referensi#

• Pseudo-elements — MDN — Daftar pseudo-element beserta aturan penulisan satu dan dua titik dua.
• content — MDN — Dokumentasi properti content, termasuk string kosong dan fungsi attr().