CSS ::before dan ::after: Pseudo-Element dan Contoh

Fungsi ::before dan ::after

::before menyisipkan sebuah kotak sebagai anak pertama sebuah elemen dan ::after sebagai anak terakhir. Isi kotak itu diatur oleh properti content. Tidak ada yang ditambahkan ke HTML: browser membuatnya dari CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

HTML-nya hanya berisi 9 dan Tests pass. Tanda dolar, label "/ month", dan tanda centang semuanya berasal dari CSS. Semuanya mewarisi style elemen (font, warna) kecuali kamu menimpanya, seperti yang dilakukan contoh di atas.

Sintaks

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

content wajib ada. Tanpanya, ::before dan ::after tidak pernah dibuat, sebanyak apa pun properti lain yang kamu berikan.

Bentuk dekoratif dengan content: ""

Dengan content: "", pseudo-element menjadi kotak kosong yang bisa kamu atur ukuran dan warnanya. Secara default ia bersifat inline, dan kotak inline mengabaikan width dan height, jadi beri display: block, inline-block, atau position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Memosisikan pseudo-element

Untuk dekorasi yang berada di atas atau di sekitar elemen, pakai position: absolute pada pseudo-element dan position: relative pada elemennya sendiri, supaya jaraknya diukur dari elemen itu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Perhatikan urutannya saat digabung dengan pseudo-class: state ditulis lebih dulu, lalu pseudo-element, .link:hover::after, tidak pernah .link::after:hover.

Membaca atribut dengan attr(): sebuah tooltip

attr() mengambil nilai atribut ke dalam content, jadi satu aturan bisa menampilkan teks berbeda di setiap elemen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Tooltip yang hanya muncul saat hover tidak terlihat oleh pengguna keyboard dan layar sentuh. Untuk hal yang penting, taruh teksnya di halaman, atau tampilkan juga saat :focus dengan tabindex="0" pada elemen.

Penomoran dengan counter

Counter CSS dan ::before bisa memberi nomor tanpa perlu mengetik angkanya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Tambah atau hapus satu langkah, dan nomornya menyesuaikan sendiri.

Di mana ::before dan ::after tidak berfungsi

Pseudo-element disisipkan di dalam elemen, di antara tag-tagnya. Elemen yang tidak punya bagian dalam untuknya tidak bisa menampilkannya:

• <img>, <video>, <iframe> (replaced element)
• <input>, <select>, <textarea> (kontrol form), dan <br>

Beberapa browser menampilkannya pada checkbox atau gambar yang rusak, tetapi hasilnya tidak konsisten. Taruh pseudo-element di pembungkus saja: <span class="field"><input></span> lalu beri style pada .field::after.

Kesalahan umum

• Tidak ada content. Satu-satunya penyebab paling umum tidak ada yang muncul. Tambahkan content: "".
• Mengatur ukuran pseudo-element inline. width dan height tidak berpengaruh sampai kamu mengatur display: block, inline-block, atau position: absolute.
• Urutan yang salah dengan state. a:hover::after berfungsi; a::after:hover tidak.
• Posisi absolute tanpa induk yang diposisikan. Pseudo-element jadi menyesuaikan diri dengan leluhur yang jauh. Tambahkan position: relative pada elemennya.
• Menaruh konten sungguhan di CSS. Teks di content tidak bisa dipilih atau disalin. Simpan informasi di HTML.