Setelah kita mempelajari pseudo-class (keadaan elemen), sekarang saatnya mengenal pseudo-element. Pseudo-element digunakan untuk mengatur gaya pada bagian tertentu dari sebuah elemen atau menambahkan konten baru tanpa mengubah HTML. Ini sangat powerful untuk dekorasi dan efek kreatif!

Apa Itu Pseudo-element?

Pseudo-element adalah kata kunci yang ditambahkan ke selektor dengan dua titik dua (::) untuk memilih bagian tertentu dari sebuah elemen. Berbeda dengan pseudo-class yang memilih elemen dalam keadaan tertentu, pseudo-element memilih fragmen elemen (huruf pertama, baris pertama, sebelum/sesudah konten).

Sintaks Pseudo-element:

selektor::pseudo-element {
    properti: nilai;
}

/* Contoh: membuat huruf pertama besar */
p::first-letter {
    font-size: 48px;
    font-weight: bold;
}

Catatan Penting:
- CSS3 membedakan pseudo-class (:) dan pseudo-element (::) dengan dua titik dua
- Untuk kompatibilitas dengan CSS2, browser tetap mendukung satu titik dua (:) untuk pseudo-element
- Tapi disarankan menggunakan :: untuk pseudo-element (lebih modern dan jelas)

Jenis-jenis Pseudo-element

Pseudo-element	Fungsi	Contoh

::before Menambahkan konten di SEBELUM konten elemen h1::before { content: "✨ "; } ::after Menambahkan konten di SETELAH konten elemen h1::after { content: " ✨"; } ::first-line Memilih baris PERTAMA dari teks p::first-line { font-weight: bold; } ::first-letter Memilih huruf PERTAMA dari teks p::first-letter { font-size: 48px; } ::selection Memilih teks yang sedang di-highlight pengguna ::selection { background: yellow; }

1. Pseudo-element ::before dan ::after

::before dan ::after adalah pseudo-element paling powerful. Mereka digunakan untuk menambahkan konten sebelum atau setelah konten elemen tanpa mengubah HTML. Properti content WAJIB ada!

Contoh Dasar:

<style>
    h1::before {
        content: "✨ ";
    }
    
    h1::after {
        content: " ✨";
    }
    
    .quote::before {
        content: "“";
        font-size: 48px;
        color: #3b82f6;
        font-family: serif;
    }
    
    .quote::after {
        content: "”";
        font-size: 48px;
        color: #3b82f6;
        font-family: serif;
        vertical-align: bottom;
    }
    
    .price::before {
        content: "Rp ";
        font-weight: normal;
    }
    
    .price::after {
        content: ",-";
    }
</style>

<h1>Judul dengan Dekorasi</h1>
<p class="quote">Belajar CSS itu menyenangkan</p>
<p class="price">50000</p>

Hasilnya:

Judul dengan Dekorasi

Belajar CSS itu menyenangkan

50000

Contoh Lanjutan: Tooltip dengan ::before dan ::after

<style>
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted #3b82f6;
        cursor: help;
    }
    
    .tooltip::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #1e293b;
        color: white;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        display: none;
    }
    
    .tooltip::after {
        content: "";
        position: absolute;
        bottom: 115%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: #1e293b transparent transparent transparent;
        display: none;
    }
    
    .tooltip:hover::before,
    .tooltip:hover::after {
        display: block;
    }
</style>

<span class="tooltip" data-tooltip="Ini adalah tooltip keren!">Hover ke sini</span>

Hover untuk melihat tooltip yang dibuat dengan ::before dan ::after

Kegunaan ::before dan ::after:

Menambahkan icon dekorasi (✨, →, ✓, dll)
Membuat tooltip custom
Membuat efek quote (tanda petik)
Menambahkan prefix/suffix pada teks (Rp, %, dll)
Membuat efek hover yang kreatif
Clearfix untuk mengatasi float

2. Pseudo-element ::first-line

::first-line digunakan untuk mengatur gaya baris pertama dari sebuah teks. Berguna untuk efek drop cap atau styling khusus pada paragraf pembuka.

Contoh:

<style>
    article p::first-line {
        font-weight: bold;
        color: #3b82f6;
        letter-spacing: 1px;
    }
    
    .news p::first-line {
        text-transform: uppercase;
        background-color: #fef9c3;
    }
</style>

<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</article>

Hasilnya:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Catatan ::first-line:

Hanya bekerja pada elemen block (p, div, h1, dll)
Tidak semua properti CSS bisa digunakan (hanya properti yang berkaitan dengan font, warna, background, margin, padding)
Bergantung pada lebar viewport (baris pertama bisa berubah saat resize)

3. Pseudo-element ::first-letter

::first-letter digunakan untuk mengatur gaya huruf pertama dari sebuah teks. Efek ini sering disebut drop cap di majalah dan koran.

Contoh:

<style>
    .drop-cap::first-letter {
        font-size: 48px;
        font-weight: bold;
        color: #3b82f6;
        float: left;
        margin-right: 8px;
        line-height: 1;
    }
    
    .magazine p::first-letter {
        font-size: 56px;
        font-weight: bold;
        font-family: 'Times New Roman', serif;
        color: #ef4444;
        margin-right: 10px;
        float: left;
    }
</style>

<p class="drop-cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Hasilnya:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Tips ::first-letter:

Gunakan float: left untuk efek drop cap (huruf besar mengambang)
Bisa dikombinasikan dengan line-height untuk penyesuaian vertikal
Hanya bekerja pada elemen block

4. Pseudo-element ::selection

::selection digunakan untuk mengatur gaya teks yang sedang di-highlight (diblok) oleh pengguna. Ini meningkatkan pengalaman pengguna.

Contoh:

<style>
    /* Default selection */
    ::selection {
        background-color: #fef9c3;
        color: #1e293b;
    }
    
    /* Selection khusus untuk area tertentu */
    .code-block::selection {
        background-color: #1e293b;
        color: #bbf7d0;
    }
    
    /* Selection untuk heading */
    h1::selection {
        background-color: #3b82f6;
        color: white;
    }
</style>

<h1>Judul Utama</h1>
<p>Coba seleksi (blok) teks ini. Warna background akan berubah menjadi kuning.</p>
<pre class="code-block">console.log("Coba seleksi teks di sini!");</pre>

Hasilnya (coba blok teks di bawah):

Judul Utama

Coba seleksi (blok) teks ini. Warna background akan berubah menjadi kuning.

console.log("Coba seleksi teks di sini!");

⬆️ Coba blok teks di atas untuk melihat efek ::selection

Catatan ::selection:

Hanya beberapa properti yang bisa digunakan: color, background-color, text-shadow
Sangat berguna untuk branding (warna selection sesuai tema website)
Meningkatkan pengalaman pengguna

Contoh Proyek: Artikel dengan Pseudo-element

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-element - Artikel Styling</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        }
        
        /* ========== PSEUDO-ELEMENT DEMO ========== */
        
        /* ::before dan ::after - dekorasi heading */
        h1 {
            color: #1e293b;
            margin-bottom: 20px;
            text-align: center;
        }
        
        h1::before {
            content: "📖 ";
        }
        
        h1::after {
            content: " ✨";
        }
        
        /* ::first-letter - drop cap */
        .drop-cap::first-letter {
            font-size: 52px;
            font-weight: bold;
            color: #3b82f6;
            float: left;
            margin-right: 10px;
            line-height: 0.9;
            font-family: 'Times New Roman', serif;
        }
        
        /* ::first-line - baris pertama artikel */
        .intro::first-line {
            font-weight: bold;
            color: #3b82f6;
            letter-spacing: 0.5px;
        }
        
        /* ::selection - custom highlight */
        ::selection {
            background-color: #fef9c3;
            color: #1e293b;
        }
        
        /* Tooltip dengan ::before dan ::after */
        .tooltip-word {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted #3b82f6;
            cursor: help;
            font-weight: 500;
        }
        
        .tooltip-word::before {
            content: attr(data-tip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #1e293b;
            color: white;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            display: none;
            z-index: 10;
        }
        
        .tooltip-word::after {
            content: "";
            position: absolute;
            bottom: 115%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: #1e293b transparent transparent transparent;
            display: none;
        }
        
        .tooltip-word:hover::before,
        .tooltip-word:hover::after {
            display: block;
        }
        
        /* Quote dengan ::before dan ::after */
        .quote-block {
            background: #eef2ff;
            padding: 25px 30px;
            border-radius: 16px;
            margin: 25px 0;
            font-style: italic;
            position: relative;
        }
        
        .quote-block::before {
            content: "“";
            font-size: 60px;
            color: #3b82f6;
            position: absolute;
            top: -10px;
            left: 10px;
            font-family: serif;
        }
        
        .quote-block::after {
            content: "”";
            font-size: 60px;
            color: #3b82f6;
            position: absolute;
            bottom: -30px;
            right: 10px;
            font-family: serif;
        }
        
        /* Author signature dengan ::before */
        .author::before {
            content: "— ";
            font-weight: normal;
        }
        
        /* List styling dengan ::before */
        .custom-list {
            list-style: none;
            margin: 20px 0;
        }
        
        .custom-list li {
            margin-bottom: 10px;
            padding-left: 25px;
            position: relative;
        }
        
        .custom-list li::before {
            content: "✓";
            color: #22c55e;
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        
        /* Button dengan icon */
        .btn {
            background-color: #3b82f6;
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn::before {
            content: "→ ";
            transition: transform 0.3s;
            display: inline-block;
        }
        
        .btn:hover::before {
            transform: translateX(5px);
        }
        
        .btn:hover {
            background-color: #2563eb;
        }
        
        hr {
            margin: 30px 0;
            border: none;
            border-top: 2px solid #e2e8f0;
        }
        
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 30px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        .info-box pre {
            background: #1e1e2e;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 10px 0;
            font-size: 13px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Belajar Pseudo-element CSS</h1>
        
        <p class="intro">Pseudo-element adalah fitur CSS yang memungkinkan kita mengatur gaya pada bagian tertentu dari sebuah elemen atau menambahkan konten baru tanpa mengubah HTML.</p>
        
        <p class="drop-cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        
        <div class="quote-block">
            <p>CSS pseudo-element membuka banyak kemungkinan kreatif tanpa perlu JavaScript. Dengan ::before dan ::after, kita bisa menambahkan dekorasi, icon, dan efek interaktif.</p>
            <p class="author">Seorang Web Developer</p>
        </div>
        
        <p>Dalam pengembangan web modern, pemahaman tentang pseudo-element sangat penting. Misalnya, kita bisa membuat <span class="tooltip-word" data-tip="Informasi tambahan">tooltip kustom</span> tanpa JavaScript sama sekali!</p>
        
        <ul class="custom-list">
            <li>Mudah menambahkan icon dekorasi</li>
            <li>Membuat efek quote yang elegan</li>
            <li>Tooltip interaktif tanpa JS</li>
            <li>Drop cap untuk artikel majalah</li>
        </ul>
        
        <button class="btn">Selengkapnya</button>
        
        <hr>
        
        <div class="info-box">
            <h3>Pseudo-element yang Digunakan di Halaman Ini:</h3>
            <ul>
                <li><code>h1::before</code> dan <code>h1::after</code> → menambah dekorasi emoji pada heading</li>
                <li><code>.drop-cap::first-letter</code> → efek drop cap pada huruf pertama paragraf</li>
                <li><code>.intro::first-line</code> → styling baris pertama artikel</li>
                <li><code>::selection</code> → custom warna highlight teks</li>
                <li><code>.tooltip-word::before</code> dan <code>.tooltip-word::after</code> → tooltip custom</li>
                <li><code>.quote-block::before</code> dan <code>.quote-block::after</code> → tanda petik pada quote</li>
                <li><code>.custom-list li::before</code> → icon centang pada list</li>
                <li><code>.btn::before</code> → icon panah pada tombol dengan animasi hover</li>
            </ul>
            
            <h3 style="margin-top: 20px;">Perbedaan Pseudo-class vs Pseudo-element:</h3>
            <ul>
                <li><strong>Pseudo-class (:)</strong> → memilih elemen berdasarkan keadaan (hover, focus, first-child, dll)</li>
                <li><strong>Pseudo-element (::)</strong> → memilih bagian dari elemen atau menambah konten baru (before, after, first-letter, dll)</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual halaman artikel:

✨ Belajar Pseudo-element CSS ✨

Pseudo-element adalah fitur CSS yang memungkinkan kita mengatur gaya pada bagian tertentu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

“

CSS pseudo-element membuka banyak kemungkinan kreatif tanpa perlu JavaScript.

”

Pseudo-element yang Digunakan: ::before, ::after, ::first-letter, ::first-line, ::selection

Tabel Perbandingan Pseudo-element

Pseudo-element	Fungsi	Properti Wajib	Contoh Penggunaan
`::before`	Menambah konten sebelum elemen	`content`	Icon, prefix, tooltip
`::after`	Menambah konten setelah elemen	`content`	Suffix, quote, clearfix
`::first-line`	Memilih baris pertama teks	-	Styling baris pertama artikel
`::first-letter`	Memilih huruf pertama teks	-	Drop cap (huruf besar di awal paragraf)
`::selection`	Memilih teks yang di-highlight	-	Custom warna highlight

Kesalahan Umum Pemula

Lupa properti content pada ::before dan ::after → Pseudo-element ::before dan ::after TIDAK AKAN MUNCUL tanpa properti content (bisa diisi string kosong content: "";).
Mengira ::before dan ::after bisa untuk semua elemen → Tidak bisa untuk elemen yang tidak memiliki konten (seperti <img>, <input>, <br>).
Menggunakan satu titik dua (:) untuk pseudo-element → Diperbolehkan untuk kompatibilitas, tapi disarankan :: (dua titik dua) untuk pseudo-element.
Mengira ::first-line dan ::first-letter bisa untuk elemen inline → Hanya bekerja pada elemen block.
Lupa bahwa ::selection tidak bisa mengatur semua properti CSS → Hanya color, background-color, text-shadow yang bisa diubah.

Debugging Tips:

Buka Developer Tools (F12) → inspect elemen → lihat pseudo-element di panel Elements (biasanya ada ikon ::before/::after)
Pastikan properti content ada dan tidak kosong (kecuali memang ingin kosong untuk layout)
Cek apakah elemen target adalah block element (untuk ::first-line dan ::first-letter)
Gunakan display: block pada pseudo-element jika perlu mengatur lebar/tinggi

Latihan Singkat

Buat file HTML dengan heading, tambahkan icon sebelum dan sesudah heading menggunakan ::before dan ::after
Buat paragraf dengan efek drop cap menggunakan ::first-letter
Buat list dengan icon centang menggunakan ::before
Buat tooltip sederhana menggunakan ::before dan ::after (saat hover muncul tooltip)
Buat custom selection warna menggunakan ::selection
Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

Pseudo-element (::) memilih bagian dari elemen atau menambah konten baru
::before dan ::after → menambah konten sebelum/sesudah elemen (wajib properti content)
::first-line → memilih baris pertama teks (hanya block element)
::first-letter → memilih huruf pertama teks (untuk efek drop cap)
::selection → mengatur gaya teks yang di-highlight pengguna
Pseudo-element sangat berguna untuk dekorasi, tooltip, quote, dan efek kreatif tanpa JavaScript
Jangan lupa perbedaan pseudo-class (:) untuk keadaan dan pseudo-element (::) untuk bagian/fragmen

Tantangan: Buat sebuah Halaman Landing Page yang memanfaatkan berbagai pseudo-element! Persyaratan:

Header dengan icon dekorasi menggunakan ::before dan ::after
Hero section dengan drop cap pada paragraf pertama (::first-letter)
Setiap kartu fitur memiliki icon centang di sebelah kiri menggunakan ::before
Tombol CTA dengan icon panah yang bergerak saat hover (menggunakan ::before atau ::after)
Testimonial section dengan tanda petik besar menggunakan ::before dan ::after
Custom selection warna yang sesuai dengan tema website
Tooltip pada kata-kata penting (misal: fitur unggulan) menggunakan ::before dan ::after
Tambahkan kotak penjelasan yang mendokumentasikan semua pseudo-element yang digunakan

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #7 - Pseudo-class (hover, focus, active, visited, first-child, last-child, nth-child)
Artikel Selanjutnya: CSS Dasar #9 - Selektor Atribut (Attribute Selector)

CSS Dasar #8 - Pseudo-element (before, after, first-line, first-letter, selection)

Apa Itu Pseudo-element?

Jenis-jenis Pseudo-element

1. Pseudo-element ::before dan ::after

Contoh Dasar:

Judul dengan Dekorasi

Contoh Lanjutan: Tooltip dengan ::before dan ::after

2. Pseudo-element ::first-line

Contoh:

3. Pseudo-element ::first-letter

Contoh:

4. Pseudo-element ::selection

Contoh:

Judul Utama

Contoh Proyek: Artikel dengan Pseudo-element

✨ Belajar Pseudo-element CSS ✨

Tabel Perbandingan Pseudo-element

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

CSS Dasar #0 - Daftar Isi - DASAR-DASAR CSS UNTUK PEMULA

نموذج الاتصال