ID (Indonesia) Translation

CSS - Pseudo Element

Halo sana, para ahli CSS masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dalam dunia magis CSS pseudo-element. Sebagai guru komputer tetangga yang ramah, saya sangat senang untuk mengantar Anda dalam petualangan ini. Jadi, genggam wicara virtual Anda (papan ketik), dan mari kita masuk!

Overview

Imaginasi Anda sedang menghias sebuah ruangan. Anda sudah memiliki furnitur (elemen HTML) di tempatnya, tapi Anda ingin menambahkan beberapa sentuhan khusus tanpa mengubah furnitur itu sendiri. Itu di mana pseudo-element berguna! Itu seperti hiasan magis yang Anda bisa tambahkan ke elemen HTML Anda tanpa benar-benar mengubah HTML.

Syntax

Sebelum kita mulai mencurahkan mantra (menulis kode), mari belajar ungkapan (syntax):

selector::pseudo-element {
property: value;
}

Perhatikan dua tanda titik dua (::)? Itu adalah tongkat sihir kita! Itu memberitahu browser, "Halo, saya akan menciptakan sesuatu yang khusus di sini!"

CSS ::after Pseudo-element

Mari kita mulai dengan ::after pseudo-element. Itu seperti memiliki asisten magis yang mengikuti elemen Anda, membawa konten ekstra.

.magic-box::after {
content: "?";
margin-left: 5px;
}

Dalam contoh ini, setiap elemen dengan kelas "magic-box" akan memiliki topi jingkrak emoji muncul langsung setelahnya. Itu seperti Anda mencabut seekor kelinci (atau dalam kasus ini, topi) dari topi CSS Anda!

CSS ::before Pseudo-element

Jika ::after adalah asisten yang mengikuti elemen Anda, ::before adalah yang memimpin jalan. Itu menambahkan konten sebelum elemen Anda.

.wizards-name::before {
content: "?‍♂️ ";
}

Sekarang, setiap nama penyihir akan memiliki emoji penyihir sebelumnya. Abrakadabra!

CSS ::first-letter Pseudo-element

Ingin membuat teks Anda terlihat seperti gulungan magis kuno? ::first-letter adalah mantra Anda!

p::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}

Ini akan membuat huruf pertama setiap paragraf menjadi lebih besar, ungu, dan melayang ke kiri. Itu seperti memiliki penulis magis yang mengiluminasi naskah Anda!

CSS ::first-line Pseudo-element

Seperti ::first-letter, tapi untuk seluruh baris pertama teks.

p::first-line {
font-weight: bold;
color: #4B0082;
}

Sekarang baris pertama setiap paragraf akan menjadi tebal dan biru tua. Itu seperti menyorot bagian paling penting dari gulungan magis Anda!

CSS ::selection Pseudo-element

Pernah ingin menyesuaikan bagaimana teks terlihat saat dipilih? ::selection adalah mantra untuk itu!

::selection {
background-color: #FFD700;
color: #000000;
}

Sekarang saat Anda memilih teks di halaman Anda, itu akan memiliki latar belakang emas dengan teks hitam. Itu seperti mengubah kursor Anda menjadi Raja Midas!

Multiple Pseudo-elements

Anda bisa menggunakan beberapa pseudo-element di satu elemen. Itu seperti menjejerkan mantra untuk efek magis ekstra!

.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}

Ini akan menambahkan tanda kutip sebelum dan setelah elemen dengan kelas "magical-quote", membuatnya tampak menonjol seperti nubuat mistik!

Tabel Metode Pseudo-element

Berikut ini adalah buku mantra (tabel) dari semua metode pseudo-element yang kita pelajari:

Pseudo-element	Deskripsi	Contoh
::after	Menambahkan konten setelah elemen	.element::after { content: "?"; }
::before	Menambahkan konten sebelum elemen	.element::before { content: "?‍♂️"; }
::first-letter	Menggaya huruf pertama teks	p::first-letter { font-size: 2em; }
::first-line	Menggaya baris pertama teks	p::first-line { font-weight: bold; }
::selection	Menggaya teks yang dipilih	::selection { background-color: gold; }

Ingat, para penyihir muda, kekuatan pseudo-element berada dalam kemampuan mereka untuk menambahkan gaya dan konten tanpa membanjiri HTML Anda. Mereka seperti ajudan tak kenal lelah, selalu ada saat Anda membutuhkan mereka, tapi tidak pernah menghalangi jalan Anda.

Saat kita mengakhiri perjalanan CSS magis ini, saya harap Anda merasa terinspirasi untuk mencoba pseudo-element ini. Jangan takut untuk mencampur dan mencoba, menggabungkan dan mengkombinasikan. Batasnya hanya imajinasi Anda!

Dalam tahun-tahun mengajar saya, saya telah melihat murid-murid menciptakan hal yang menakjubkan dengan alat ini. Salah satu murid bahkan menggunakan pseudo-element untuk menciptakan akuarium virtual, dengan ikan (::before dan ::after elemen) berenang di layar!

Jadi, maju saja,ayunilah tongkat CSS Anda, dan buatlah magi Anda sendiri. Dan ingat, di dunia pengembangan web, Anda tidak pernah terlalu tua untuk mempercayai sedikit magi. Selamat mengoding, dan semoga stylesheet Anda selalu bebas bug!

Credits: Image by storyset