::before dan ::after

Pengenalan Pseudo-Elements ::before dan ::after

Pseudo-elements ::before dan ::after adalah bagian dari CSS yang memungkinkan Anda untuk memasukkan konten tambahan ke dalam elemen HTML, tanpa perlu menambahkan elemen HTML tambahan. Ini sangat berguna untuk menambahkan dekorasi, ikon, atau elemen tambahan lainnya ke dalam elemen HTML yang ada.

Penggunaan ::before dan ::after

Anda dapat menggunakan pseudo-elements ini dengan cara berikut:

  1. Menggunakan CSS untuk Menentukan Konten Tambahan:

    .element::before {
 content: "Ini adalah teks tambahan sebelum elemen.";
}

.element::after {
 content: "Ini adalah teks tambahan setelah elemen.";
}

    Dalam contoh di atas, kita menggunakan properti content untuk menentukan teks atau konten tambahan yang akan ditambahkan sebelum dan sesudah elemen dengan kelas .element.

  2. Mengatur Tampilan dan Gaya:

    Anda dapat mengatur tampilan, warna, ukuran, dan gaya konten tambahan ini menggunakan properti CSS lainnya seperti font-size, color, background, dll.

    .element::before {
 content: "Teks Tambahan";
 color: #007bff;
 font-size: 18px;
}

.element::after {
 content: "Teks Tambahan";
 background: #f1f1f1;
 border: 1px solid #ccc;
}

Contoh Penggunaan dalam HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="element">Elemen dengan teks tambahan.</div>
</body>
</html>

Hasil

Dengan menggunakan pseudo-elements ::before dan ::after, Anda dapat menghasilkan konten tambahan seperti ini:

Contoh Hasil

Selamat mencoba! Anda dapat menyesuaikan kode CSS di atas sesuai dengan kebutuhan desain Anda.

PREVIOUS
NEXT