CSS Pseudo-Element

4.3  Pseudo-Element

Pseudo-Element digunakan untuk memilih bagian dari suatu element. Ciri-ciri pseudo-element yaitu diawali dengan tanda titik dua double (::).

Berikut adalah tabel beberapa pseudo-element yang dapat digunakan pada CSS :

Selector

Contoh

Keterangan

::after

p::after

menyisipkan sesuatu setelah konten pada tag <p>

::before

p::before

menyisipkan sesuatu sebelum konten pada tag <p>

::first-letter

p::first-letter

memilih huruf pertama pada tag <p>

::first-line

p::first-line

memilih baris pertama pada tag <p>

::selection

p::selection

memilih bagian elemen <p> yang dipilih (diblok)

 

Perhatikan script contoh berikut dengan nama file pseudo-element.html


 

</html>
<head>
    <style type="text/css">
        p::first-letter{
            color: red;
            font-size: 30px;
            }
    </style>
</head>
<p>Huruf pertama BESAR</p>
</body>
</html>

 Maka pada browser akan tampil sebagai berikut :

                  Semoga bermanfaat buat sobat yang baru tauπŸ‘ŠπŸ‘ŠπŸ‘‹πŸ˜‰

Posting Komentar

0 Komentar

Comments