Pada video ini kita akan membahas mengenai Pseudo Element. Banyak orang yang menganggap pseudo element ini sama dengan pseudo class, padahal dari sisi pengertiannya saja sudah berbeda. Kalau di pseudo class, kita memilih elemen dengan kondisi tertentu. Sedangkan di pseudo element, kita memilih bagian tertentu dari elemen.

Sebagai contoh, pseudo element first-line digunakan untuk memilih hanya baris pertama saja. Untuk menuliskan pseudo element, pertama kita mesti menuliskan simbol titik dua sebanyak dua kali terlebih dahulu, setelah itu barulah diikuti dengan keyword dari pseudo elementnya.

Kita buka kembali source code dari pelajaran sebelumnya. Pertama kita akan mencoba pseudo element first-letter terlebih dahulu ya.

Kita buka kode css, lalu pada bagian paling akhir, kita tambahkan selector h2::first-letter. Nah, biasanya first-letter ini digunakan untuk memberikan efek lebih besar pada huruf pertama. Jadi properti yang kita gunakan disini adalah font-size. Kita isikan dengan nilai 3rem.

Kita simpan dan refresh browser. Sekarang kita bisa melihat bahwa setiap judul kecil pada konten, huruf pertamanya akan menjadi besar.

Salah satu kelemahan terbesar dari pseudo element ini adalah terlalu mirip dengan pseudo class. Hal ini menyebabkan banyak programmer yang tidak bisa membedakan bagian mana pseudo class, dan bagian mana pseudo element. Akhirnya akan terjadi banyak kesalahan typo, misalkan pseudo element dituliskan hanya dengan satu buah titik dua saja. Browser Chrome dapat mentolelir kesalahan typo seperti ini. Jadi kalau misalnya kita menuliskan first-letter hanya dengan satu buah titik dua aja, maka kode tetap berjalan normal pada Chrome. Namun akan lebih baik apabila kita mengikuti aturan standart dengan menggunakan dua buah simbol titik dua ya, terutama untuk memastikan bahwa kode yang kita tulis dapat berfungsi dengan baik juga di browser lainnya.

Nah, sekarang apabila kita ingin agar judul h1 juga mendapatkan efek seperti h2, maka kita bisa menambahkan pada selector, h1 dan diikuti dengan huruf koma. Kita refresh browser. Ternyata untuk tag h1, yang berubah adalah seluruh kontennya, padahal yang kita inginkan hanya huruf pertamanya saja ya. Artinya pada kata h1, kita juga mesti menambahkan pseudo element ::first-letter. Dan sekarang kita sudah mendapatkan efek yang sama untuk tag h1 dan tag h2.

Selanjutnya kita akan mencoba pseudo-element first-line, dan kali ini akan kita gunakan pada element p. Kita tambahkan selector p::first-line. Lalu sebagai contoh kita berikan properti color: blue. Lalu kita cobakan juga properti lain yaitu text-transform dan kita pilih nilai capitalize ya. Capitalize ini artinya setiap huruf pertama dalam kata akan berubah menjadi huruf besar.

Kita simpan dan refresh browser. Sekarang setiap baris pertama pada paragraf akan menggunakan warna biru, dan huruf pertama dalam setiap kata akan berubah menjadi huruf besar.

Perhatikan disini bahwa saya bisa mengubah lebar dari browser menjadi lebih besar ataupun lebih kecil. Dan setiap perubahan ini akan menyebabkan jumlah kata pada setiap baris akan berubah. Namun browser akan tetap menyesuaikan secara otomatis, dan memilih hanya baris pertama saja yang berubah menjadi berwarna biru dan menggunakan huruf capital.

Selanjutnya pseudo element Before dan After biasanya digunakan untuk menambahkan konten pada element. Sebagai contoh, kita akan membuatkan satu buah class baru dengan nama new. Dan apabila class ini digunakan, maka browser akan secara otomatis menambahkan kata new berwarna merah dengan ukuran kecil pada akhir konten.

Kita tambahkan selector baru .new::after. Lalu kita tambahkan properti content, dengan nilai dalam tanda kutip dua new. Perhatikan bahwa setelah titik dua pembuka kita tambahkan spasi terlebih dahulu, agar konten new kita mendapatkan sedikit jarak dari konten sebelumnya. Kemudian untuk memberikan warna merah kita tambahkan properti color: red. Dan untuk membuat ukuran fontnya menjadi lebih kecil kita menggunakan properti font-size: 0.8rem.

Kita lihat konten Daftar Menu Restoran. Dan kita akan tambahkan class new pada Nasi Ayam Bakar. Kita buka kode HTML. Lalu kita cari tag li untuk konten Nasi Ayam Bakar. Kita tambahkan attribute class=”new”.

Kita simpan dan refresh browser. Sekarang pada sebelah kanan Nasi Ayam Bakar akan tertulis new dengan menggunakan huruf kecil berwarna merah. Dan untuk memberi tanda new pada menu-menu lain, kita cukup menambahkan attribute class=”new” pada tag li-nya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.