Belajar CSS Part 24 - Pseudo Element

byPksaimadiunkota1 •
0

CSS Pseudo-element
Apa itu pseudo-element?
pseudo-element digunakan untuk menata bagian-bagian tertentu dari suatu elemen.

Sebagai contoh, pseudo-element dapat digunakan untuk:
  • Menerapkan style untuk huruf pertama, atau garis, dari suatu elemen
  • Memasukkan konten sebelum atau sesudah konten dari suatu elemen

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

    Pseudo-element ::first-line
    Pseudo-element ::first-line digunakan untuk menambah efek khusus pada baris pertama dari sebuah teks.

    Contoh berikut penggunaan pseudo-element ::first-line pada baris pertama dari teks disemua elemen <p>.
    Contoh
    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <p>Kita dapat menggunakan pseudo element ::first-line untuk menambahkan efek khusus pada baris pertama dari sebuah teks. Lebih banyak teks. Dan bahkan lebih, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan banyak lagi. </ P>

    </body>
    </html>
    Hasilnya:
    Catatan: pseudo-element ::first-line hanya dapat diterapkan untuk elemen-elemen block-level.

    Properti berikut berlaku untuk pseudo-element ::first-line:
    • properti font
    • properti color
    • properti background
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

    Pseudo-element ::first-letter
    Pseudo-element ::first-letter digunakan untuk menambah efek khusus pada huruf pertama dari teks.

    Contoh berikut penggunaan pseudo-element ::first-letter pada huruf pertama dari teks di semua elemen <p>.
    Contoh
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <p>Kita dapat menggunakan pseudo-element ::first-letter untuk menambahkan efek khusus pada karakter pertama teks! </ p>

    </body>
    </html>
    Hasilnya:

    Catatan: pseudo-element ::first-letter hanya dapat diterapkan untuk elemen block-level.

    Properti berikut berlaku untuk pseudo-element ::first-letter:
    • properti font
    • properti color
    • properti background
    • properti margin
    • properti padding
    • properti border
    • text-decoration
    • vertical-align (hanya jika "float" memiliki value "none")
    • text-transform
    • line-height
    • float
    • clear

    Pseudo-element dan CSS Class
    Pseudo-elemen dapat dikombinasikan dengan CSS Class.
    Contoh
    p.intro::first-letter {
        color: #ff0000;
        font-size:200%;
    }  
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <p class="intro">Ini adalah introduction.</p>
    <p>Ini adalah sebuah paragraf dengan beberapa teks.</p>

    </body>
    </html>
    Hasilnya:

    Contoh di atas akan menampilkan huruf pertama paragraf dengan class="intro", berwarna merah dan dalam ukuran yang lebih besar.

    Multiple pseudo-element
    Beberapa pseudo-element juga bisa digabungkan.

    Dalam contoh berikut, huruf pertama paragraf akan menjadi merah, dalam ukuran font huruf besar (xx-large). Sisa baris pertama berwarna biru, dan dalam huruf kecil (small-caps). Sisa paragraf akan menjadi ukuran dan warna font default.
    Contoh
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }

    p::first-line {
        color: #0000ff;
        font-variant: small-caps;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <p>Kita dapat menggabungkan pseudo-element ::first-letter dan ::first-line untuk menambahkan efek khusus pada huruf pertama dan baris pertama teks! </ p>

    </body>
    </html>
    Hasilnya:

    Pseudo-element ::before
    Pseudo-element ::before dapat digunakan untuk memasukkan beberapa konten sebelum konten dari sebuah elemen.

    Contoh berikut menyisipkan gambar sebelum isi / konten dari masing-masing elemen <h1>.
    Contoh
    h1::before {
        content: url(smiley.gif);
    }
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <h1>Ini adalah heading</h1>
    <p>Pseudo-element ::before memasukkan konten sebelum konten suatu elemen.</p>

    <h1>Ini adalah heading</h1>
    <p><b>Catatan: </b>IE8 mendukung properti konten hanya jika DOCTYPE dideklarasikan. </ p>

    </body>
    </html>
    Hasilnya:

    Pseudo-element ::after
    Pseudo-element ::after dapat digunakan untuk memasukkan beberapa konten setelah isi / konten sebuah elemen.

    Contoh berikut menyisipkan gambar setelah isi / konten dari masing-masing elemen <h1>.
    Contoh
    h1::after {
        content: url(smiley.gif);
    }
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <h1>Ini adalah heading</h1>
    <p>Pseudo-element ::after memasukkan konten setelah konten pada sebuah elemen. </p>

    <h1>Ini adalah heading</h1>
    <p><b>Catatan: </b>IE8 mendukung properti konten hanya jika DOCTYPE dideklarasikan. </ p>

    </body>
    </html>
    Hasilnya:

    Pseudo-element ::selection
    Pseudo-element ::selection sesuai dengan porsi elemen yang dipilih oleh pengguna.

    Properti CSS berikut dapat diterapkan ke ::selection : color, background, cursor, dan outline.

    Contoh berikut ini membuat teks yang dipilih akan berwarna merah dan memiliki background berwarna kuning:
    Contoh
    ::-moz-selection { /* Code untuk mozilla Firefox */
        color: red;
        background: yellow;
    }

    ::selection {
        color: red;
        background: yellow;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <h1>Pilih beberapa teks di halaman ini:</h1>
    <p>Ini adalah paragraf.</p>

    <div>Ini adalah beberapa teks dalam elemen div.</div>

    <p><strong>Catatan: </strong> ::selection tidak didukung di Internet Explorer 8 dan versi sebelumnya. </ p>
    <p><strong>Catatan: </ strong> Firefox mendukung alternatif, properti :: - moz-selection. </ p>

    </body>
    </html>
    Hasilnya:

    Catatan: Pilih / blok beberapa teks yang diinginkan, maka akan berubah menjadi teks berwarna merah dan berlatar belakang kuning seperti pada gambar di atas.
    Demikian pembahasan mengenai pseudo-element dalam CSS.
    Semoga bermanfaat!

    Sumber: https://www.w3schools.com
    Tags:

    Posting Komentar

    Lebih baru Lebih lama