Elemen semu

The CSS Podcast - 014: Pseudo-elements

Jika Anda memiliki artikel konten dan ingin huruf pertamanya menjadi drop cap yang jauh lebih besar— bagaimana cara melakukannya?

Beberapa paragraf teks dengan huruf besar awal berwarna biru

Di CSS, Anda dapat menggunakan elemen pseudo ::first-letter untuk mendapatkan detail desain semacam ini.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Pseudo-elemen seperti menambahkan atau menargetkan elemen tambahan tanpa harus menambahkan lebih banyak HTML. Contoh solusi ini, yang menggunakan ::first-letter, adalah salah satu dari banyak pseudo-elemen. Elemen ini memiliki berbagai peran, dan dalam pelajaran ini, Anda akan mempelajari elemen pseudo yang tersedia dan cara menggunakannya.

::before dan ::after

Pseudo-elemen ::before dan ::after hanya membuat elemen turunan di dalam elemen jika Anda menentukan properti content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content dapat berupa string apa pun —bahkan string kosong— tetapi perhatikan bahwa apa pun selain string kosong kemungkinan akan diumumkan oleh pembaca layar. Anda dapat menambahkan url gambar, yang akan menyisipkan gambar pada dimensi aslinya, sehingga Anda tidak dapat mengubah ukurannya. Anda juga dapat menyisipkan counter.

Setelah elemen ::before atau ::after dibuat, Anda dapat menata gayanya sesuai keinginan tanpa batasan. Anda hanya dapat menyisipkan elemen ::before atau ::after ke elemen yang akan menerima elemen turunan (elemen dengan hierarki dokumen), sehingga elemen seperti <img />, <video>, dan <input> tidak akan berfungsi.

::first-letter

Kita telah bertemu dengan elemen pseudo ini di awal pelajaran. Perlu diketahui bahwa tidak semua properti CSS dapat digunakan saat menargetkan ::first-letter. Properti yang tersedia adalah:

  • color
  • Properti background (seperti background-image)
  • Properti border (seperti border-color)
  • float
  • Properti font (seperti font-size dan font-weight)
  • properti teks (seperti text-decoration dan word-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Elemen pseudo ::first-line akan memungkinkan Anda menata gaya baris pertama teks hanya jika elemen dengan ::first-line yang diterapkan memiliki nilai display dari block, inline-block, list-item, table-caption, atau table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Seperti elemen pseudo ::first-letter, hanya ada sebagian properti CSS yang dapat Anda gunakan:

  • color
  • background properti
  • font properti
  • text properti

::backdrop

Jika memiliki elemen yang ditampilkan dalam mode layar penuh, seperti <dialog> atau <video>, Anda dapat menata gaya latar belakang—ruang antara elemen dan bagian halaman lainnya—dengan pseudo-elemen ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

Pseudo-elemen ::marker memungkinkan Anda menata gaya tanda peluru atau angka untuk item daftar atau panah elemen <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Hanya sebagian kecil properti CSS yang didukung untuk ::marker:

  • color
  • content
  • white-space
  • font properti
  • Properti animation dan transition

Anda dapat mengubah simbol penanda, menggunakan properti content. Anda dapat menggunakannya untuk menetapkan simbol plus dan minus untuk status tertutup dan kosong elemen <summary>, misalnya.

::selection

Elemen pseudo ::selection memungkinkan Anda menata gaya tampilan teks yang dipilih.

::selection {
  background: green;
  color: white;
}

Elemen pseudo ini dapat digunakan untuk menata gaya semua teks yang dipilih seperti dalam demo di atas. Ini juga dapat digunakan bersama dengan pemilih lain untuk gaya pemilihan yang lebih spesifik.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Seperti elemen semu lainnya, hanya sebagian properti CSS yang diizinkan:

  • color
  • background-color, tetapi bukan background-image
  • text properti

::placeholder

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 10.1.

Source

Anda dapat menambahkan petunjuk bantuan untuk membentuk elemen, seperti <input> dengan atribut placeholder. Elemen pseudo ::placeholder memungkinkan Anda menata gaya teks tersebut.

input::placeholder {
  color: darkcyan;
}

::placeholder hanya mendukung subset aturan CSS:

  • color
  • background properti
  • font properti
  • text properti

::cue

Browser Support

  • Chrome: 26.
  • Edge: 79.
  • Firefox: 55.
  • Safari: 7.

Source

Terakhir dalam tur pseudo-elemen ini adalah pseudo-elemen ::cue. Hal ini memungkinkan Anda menata gaya isyarat WebVTT, yang merupakan teks elemen <video>.

Anda juga dapat meneruskan pemilih ke ::cue, yang memungkinkan Anda menata gaya elemen tertentu di dalam teks.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang pseudo-elemen

Manakah dari berikut ini yang bukan pseudo-elemen?

::before
Jangan lupa menambahkan content: '';.
::first-paragraph
Ini tidak ada di CSS.
::after
Jangan lupa menambahkan content: '';.
::marker
Ini adalah elemen titik saat Anda menggunakan elemen daftar atau jenis tampilan.
::pencil
Ini tidak ada di CSS.
:active
Ini adalah pseudo-class, bukan pseudo-elemen.

Pseudo-elemen dapat ditemukan dalam file HTML.

Benar
Meskipun DevTools dapat menampilkan elemen pseudo di panel Elemen, elemen pseudo tidak akan ditemukan di HTML karena dimiliki oleh browser.
Salah
Elemen ini dapat ditargetkan oleh CSS, tetapi tidak akan ditemukan di HTML.