Praktik Pseudo Classes & Elements

by oktaviardi pratama

HTML

<!-- Bagian 1: Button -->
    <div class="btn-container">
        <h2>1. Interactive Button</h2>
        <p>Arahkan mouse, klik, atau gunakan tombol Tab keyboard.</p>
        <br>
        <button class="magic-btn">Klik Saya</button>
    </div>

    <!-- Bagian 2: List -->
    <div class="list-container">
        <h2>2. Styled List (nth-child)</h2>
        <ul>
            <li>Item Pertama (Ganjil)</li>
            <li>Item Kedua (Genap)</li>
            <li>Item Ketiga (Ganjil)</li>
            <li>Item Keempat (Genap)</li>
            <li>Item Kelima (Ganjil)</li>
        </ul>
    </div>

    <!-- Bagian 3: Article -->
    <div class="article-box">
        <h2>3. Decorated Text</h2>
        <p>
            Ini adalah contoh paragraf yang menggunakan pseudo-element.
            Huruf pertama diperbesar secara otomatis, dan tanda kutip ditambahkan
            di awal serta akhir teks tanpa mengubah HTML sama sekali.
        </p>
    </div>

CSS

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f4f4f9;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
        }

        h2 { color: #333; border-bottom: 2px solid #ddd; padding-bottom: 10px; }

        /* --- BAGIAN 1: BUTTON DENGAN HOVER & ACTIVE --- */
        .btn-container { text-align: center; }

        .magic-btn {
            background-color: #6c5ce7;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 18px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease; /* Agar perubahan halus */
            position: relative; /* Penting untuk positioning pseudo-element */
            overflow: hidden;
        }

        /* 1. Pseudo-class: HOVER */
        .magic-btn:hover {
            background-color: #a29bfe;
            transform: translateY(-3px); /* Naik sedikit */
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
        }

        /* 2. Pseudo-class: ACTIVE (Saat diklik) */
        .magic-btn:active {
            transform: translateY(1px); /* Turun sedikit seperti ditekan */
            box-shadow: none;
        }

        /* 3. Pseudo-class: FOCUS (Untuk aksesibilitas keyboard) */
        .magic-btn:focus {
            outline: 3px dashed #fdcb6e;
            outline-offset: 4px;
        }

        /* 4. Pseudo-element: ::before (Icon Panah) */
        .magic-btn::before {
            content: "➜"; /* Simbol panah */
            margin-right: 10px;
            font-weight: bold;
            transition: transform 0.3s ease;
            display: inline-block;
        }

        /* Animasi icon saat hover */
        .magic-btn:hover::before {
            transform: translateX(5px); /* Panah geser ke kanan */
        }

       ...