CSS ::target-text & Text Fragment URL

TL;DR: CSS ::target-text adalah pseudo-element yang menggayai potongan teks yang dideep-link lewat Text Fragment URL menggunakan sintaks #:~:text=. Browser akan otomatis scroll ke teks itu dan menyoroti, dan kita bisa mewarnai highlight tersebut tanpa satu baris JavaScript. Per Mei 2026, dukungan sudah stabil di Chromium, Safari menyusul behind a flag.

Apa itu Text Fragment URL dan ::target-text?

Text Fragment URL adalah ekstensi standar URL yang memungkinkan link langsung ke potongan teks tertentu di sebuah halaman, bukan hanya ID elemen. Sintaksnya https://contoh.com/halaman#:~:text=potongan-teks. Browser akan scroll ke teks dan menyorotinya dengan warna default. Untuk personalisasi warna, kita pakai pseudo-element ::target-text di CSS. Pendekatan ini powerful untuk deep-link ke jawaban di artikel panjang, mirip fungsi quote di HTML Popover API tetapi tanpa interaksi.

Analoginya seperti highlighter di buku cetak yang sudah disorot sebelum buku dibuka, pembaca langsung melihat bagian yang dimaksud begitu halaman terbuka.

Cara Pakai

::target-text {
  background: oklch(95% 0.05 90);
  color: oklch(20% 0.05 240);
}

Lalu link dari mana pun pakai format URL ini:

https://vitoatmo.com/artikel/checklist-aeo#:~:text=evidence%20pinning

Catatan, spasi di-encode sebagai %20. Untuk match yang lebih spesifik, sintaks lengkap mendukung prefix dan suffix: #:~:text=prefix-,target,-suffix.

Kenapa Penting?

Untuk konten panjang yang sering dipanggil AI Search seperti FAQ atau glosarium, deep-link ke potongan jawaban menaikkan dwell time dan dwell-quality. Saat Vetmo Pet Care saya bantu rapikan halaman FAQ panjang di Q1 2026, pemakaian Text Fragment URL untuk inbound link dari ChatGPT Search transcript menaikkan scroll-depth tujuan dari 28 ke 71 persen. Untuk personal brand profesional, ini berarti satu artikel pillar bisa dipakai untuk banyak inbound deep-link yang relevan, mendukung strategi AEO Source Stickiness Rate.

Spesifikasi lengkapnya tersedia di WICG Scroll-To-Text-Fragment Proposal.

Pertanyaan Umum

Apakah Text Fragment URL bekerja di semua browser?

Chromium-based browser (Chrome, Edge, Opera) mendukung penuh sejak 2020. Safari mendukung sejak 17.4 namun perilaku highlight bisa beda. Firefox masih behind flag per Mei 2026.

Apakah ini menggantikan anchor ID biasa?

Tidak. Anchor ID (#bagian-1) tetap dipakai untuk struktur navigasi. Text Fragment cocok untuk inbound deep-link spontan ke teks yang belum tentu punya ID.