CSS Academy · Pelajaran

Konten ::before dan ::after

Sisipkan konten yang dihasilkan sebelum atau sesudah elemen menggunakan ::before dan ::after dengan properti content.

Konten ::before dan ::after adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu Elemen Semu?

Elemen semu membuat elemen virtual yang ditata seolah-olah merupakan bagian dari DOM. Elemen semu menggunakan titik dua ganda ::. Yang paling sering digunakan adalah ::before dan ::after.

::before dan ::after

::before menyisipkan konten yang dihasilkan sebelum konten suatu elemen. ::after menyisipkannya setelah konten tersebut. Keduanya memerlukan properti content agar ditampilkan.

<span class="element">Text with generated content</span>

Properti content

Properti content menerima:

Sebuah string: content: "text"
String kosong: content: "" (umum untuk bentuk dekoratif)
URL: content: url("icon.svg")
Penghitung: content: counter(step)
attr(): content: attr(data-tooltip)

Tanda Kutip Dekoratif

Tambahkan tanda kutip tipografis tanpa menambahkannya ke HTML:

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

Bentuk dengan content Kosong

Menetapkan content: "" bersama posisi dan dimensi akan membuat bentuk dekoratif tanpa HTML tambahan:

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

Pembersihan Float dengan ::after

Pembersihan float klasik menggunakan ::after untuk menghapus efek float tanpa markup tambahan:

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

Tooltip dengan ::after

Tooltip yang hanya menggunakan CSS dengan ::after dan attr():

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

Ikon dengan content: url()

Sisipkan ikon kecil sebelum tautan menggunakan content: url():

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Keterbatasan Elemen Semu

Elemen semu tidak berada di dalam DOM. Elemen tersebut:

Tidak dapat dipilih atau ditelusuri oleh pengguna
Secara default tidak dapat diakses oleh pembaca layar
Tidak dapat ditargetkan oleh JavaScript

Jangan pernah menempatkan konten penting dalam konten yang dihasilkan — gunakan elemen tersebut hanya untuk keperluan dekoratif.

Titik Dua Tunggal vs Titik Dua Ganda

Titik dua tunggal (:before) adalah sintaks CSS2. Titik dua ganda (::before) adalah standar CSS3 yang membedakan elemen semu dari kelas semu. Keduanya berfungsi di peramban modern, tetapi gunakan titik dua ganda untuk kode baru.

Elemen Mana yang Mendukung ::before/::after

Elemen pengganti (img, input, select, video) tidak dapat memiliki elemen semu karena tidak memiliki area konten untuk menyisipkan elemen tersebut. Sebagai gantinya, gunakan elemen pembungkus untuk dekorasi.

Pemeriksaan Singkat

Nilai content apa yang diperlukan untuk elemen semu dekoratif ::before tanpa teks yang terlihat?

Ringkasan

::before dan ::after menyisipkan konten yang dihasilkan di sekitar konten sebenarnya suatu elemen. Properti content wajib digunakan. Gunakan keduanya untuk bentuk dekoratif, ikon, tanda kutip, dan tooltip — tetapi jangan pernah menggunakannya untuk konten bermakna yang perlu diakses atau dibaca pengguna.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Konten ::before dan ::after” gratis?

Ya — teks lengkap “Konten ::before dan ::after” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Konten ::before dan ::after”?

Sisipkan konten yang dihasilkan sebelum atau sesudah elemen menggunakan ::before dan ::after dengan properti content. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Konten ::before dan ::after” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy