Tutorial CSS / Elemen Semu CSS: ::before dan ::after

Elemen semu CSS (pseudo-element) menata bagian tertentu dari sebuah elemen atau membuat kotak hanya untuk presentasi. ::before dan ::after dapat menambahkan konten dekoratif, tetapi informasi penting harus tetap berada di HTML daripada bergantung pada konten yang dihasilkan.

Membedakan kelas semu dan elemen semu

Kombinator dan Kelas Semu CSS menjelaskan kelas semu, yaitu selektor untuk status atau kondisi elemen yang sudah ada. a:hover menargetkan tautan itu sendiri yang sedang dihover oleh mouse. Sebuah elemen semu menargetkan bagian spesifik dari elemen atau representasi yang dibuatnya. a::after menghias sebuah elemen semu yang dibuat setelah konten tautan, di dalam elemen tersebut. Dalam kode baru, gunakan satu titik dua untuk kelas semu dan dua titik dua untuk elemen semu agar lebih mudah membedakan keduanya.

a:hover { color: #1d4ed8; }
a::after { content: ""; }

before dan after tidak menambahkan tag HTML saudara yang sebenarnya di luar elemen yang dipilih. Keduanya menghasilkan kotak tampilan sebelum atau sesudah konten di dalam elemen tersebut. Alat pengembang mungkin menampilkan elemen semu sebagai baris terpisah, tetapi ini tidak sama dengan memiliki span yang ditulis dalam HTML asli. Anda tidak bisa begitu saja mengambil elemen semu yang dibuat oleh kode yang mencari elemen anak umum.

Memahami konten dan tampilan

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: "" membuat elemen semu tanpa teks. Bahkan jika kontennya kosong, elemen ini bisa muncul sebagai kotak dekoratif jika Anda memberinya latar belakang dan ukuran. Di sisi lain, jika konten dihilangkan atau diubah menjadi none, elemen semu ini tidak dibuat dan titik tidak muncul meskipun ukuran dan latar belakang ditambahkan.

Tampilan default dari ::before dan ::after adalah inline. Gunakan inline-block untuk titik dekoratif yang memerlukan lebar dan tinggi eksplisit, dan block untuk garis di bawah konten. Untuk elemen semu ini, menghilangkan content atau mengaturnya ke none mencegah kotak yang dihasilkan. Untuk detail lebih lanjut, lihat CSS display: Block, Inline, inline-block, dan Menyembunyikan. Lihat MDN: ::before.

currentColor adalah kata kunci yang merujuk pada nilai warna elemen, yaitu, warna teks saat ini. Jika Anda mengubah judul dari hijau menjadi biru, latar belakang elemen semu juga akan menggunakan warna yang sama. border-radius: 50% membulatkan sudut kotak dengan lebar dan tinggi yang sama agar terlihat seperti lingkaran. margin-right adalah ruang luar antara titik dan huruf.

Tambahkan titik sebelum judul dan garis setelah tautan

Contoh lengkap berikut membuat titik 12px sebelum judul dan garis 2px di bawah tautan. Ini juga tetap mempertahankan garis bawah default pada tautan itu sendiri, sehingga tautan tetap dapat dikenali meskipun garis tambahan hilang. Saat mouse hover atau fokus keyboard, garis dekoratif menjadi lebih tebal hingga 4px.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Simpan sebagai index.html dan jalankan. Judul tetap menampilkan teks sebenarnya “Small Garden” dan lingkaran di depannya adalah dekorasi CSS. Tautan juga memiliki nama “Visitor Information” dan alamat tujuan di dalam HTML. a:hover::after adalah ekspresi yang memilih after dari a dalam keadaan hover. Notasi panjang terasa kurang rumit jika dibaca secara terpisah berdasarkan jumlah titik dua dan urutan pemilihannya.

Diagram ini menunjukkan HTML yang sama dengan dan tanpa elemen semu dekoratif. Teks dan tujuan tautan tetap tidak berubah. Dalam contoh lengkap, garis tautan dekoratif memiliki tinggi 2px secara default dan menjadi 4px saat disorot atau saat fokus keyboard terlihat.

Simpan informasi penting di HTML

Pembaca layar dan browser yang berbeda mungkin menyajikan konten yang dihasilkan secara berbeda, jadi jangan mengandalkan menempatkan informasi penting hanya di elemen semu. Lebih jelas menulis kondisi dalam label atau kalimat panduan yang sebenarnya daripada memberi tahu kondisi input dengan content: "Required". Fakta bahwa elemen semu terlihat saja tidak memastikan aksesibilitasnya.

Sebaiknya jangan mengandalkan implementasi dekorasi umum dengan menambahkan before dan after pada elemen yang menampilkan konten eksternal, seperti img. Terapkan pada elemen yang berisi konten, seperti h1 atau a, seperti pada contoh ini. Jika Anda memerlukan dekorasi di sekitar gambar, Anda bisa mempertimbangkan memiliki elemen HTML terpisah yang mengelilingi gambar dan mendekorasi elemen semu dari elemen tersebut.

Diagnosa elemen semu yang hilang

1. Ganti content: ""; di h1::before dengan content: none;. Teks judul harus tetap sama, tetapi hanya titik yang harus hilang. Setelah dikonfirmasi, kembalikan menjadi string kosong.
2. Ganti display: inline-block; pada titik dengan display: inline;. Perhatikan bahwa dekorasi inline tanpa teks tidak dapat mempertahankan titik 12px asli hanya dengan lebar·tinggi. Kembalikan ke inline-block.
3. Ubah warna h1 menjadi #1d4ed8. Pastikan titik-titik juga berwarna biru dan tautan tetap hijau. currentColor tidak merujuk ke satu warna pada seluruh halaman.
4. Arahkan kursor mouse Anda ke tautan dan lihat apakah garis menjadi lebih tebal. Geser mouse menjauh dan gunakan Tab untuk memindahkan fokus ke tautan dan periksa apakah garis dan outline terlihat bersamaan.

Saat memeriksa, pertama periksa apakah selektor sesuai dengan elemen sebenarnya dan apakah kontennya valid, kemudian perhatikan tampilan, ukuran, dan latar belakang. Jika Anda mengubah tinggi garis tautan menjadi 0, garisnya tidak akan terlihat, tetapi elemen semu itu sendiri yang dibuat sebagai konten tidak harus hilang. Membedakan antara “elemen tidak dibuat” dan “elemen dibuat tetapi tidak memiliki area gambar” dapat membantu Anda mempersempit penyebab kegagalan.

Setelah latihan, kembalikan nilai asli dan simpan. Elemen semu dapat memberikan dekorasi tanpa elemen HTML tambahan, tetapi konten penting harus tetap tersedia secara independen dari dekorasi tersebut. Mulailah dengan titik atau garis dan periksa bahwa teks sebenarnya, tujuan tautan, dan perilaku keyboard tetap utuh.