CSS Pseudo-Element

Dua Jendela Thursday, November 04, 2021

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 :