Seperti yang kita semua ketahui
tentang Pseudo Element pada artikel sebelumnya, kali ini saya akan penggunaan
pseudo Element
Berikut ini adalah 6 Pseudo Element:
- ::after Fungsinya untuk menyisipan konten setelah element yang di pilih, contoh syntaxnya adalah sebagai berikut: p::after {
css declarations;
} - ::before Seperti namanya syntax ::before adalah kebalikan dari syntax ::after yang artinya menyisipkan konten sebelum dari element yang di pilih, untuk syntax nya sebagai berikut: p::before {
css declarations;
} - ::first-letter di gunakan untuk merubah style huruf pertama pada element yang dipilih
Note : property berikut dapat digunakan pada ::first-letter:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if float is ‘none’)
- text-transform
- line-height
- float
- clear
untuk contoh penulisanya seperti berikut :
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
dengan hasil sebagai berikut:
- ::first-line hampir sama seperti ::first-letter tapi kalau ::first-line digunakan untuk merubah style pada baris pertama pada tag yng dipilih
Berikut adalah contoh dari ::first-line
html>
p::first-line {
background-color: yellow;
}
Dengan hasil sebagai berikut:
Jadi element ::first-line dia merubah baris pertama pada tag P apapun kondisinya .
- ::marker element ini digunakan untuk merubah style pada property list atau
Contoh: ::marker {
css declarations;
}
Hasil dari syntax ::marker:
- ::selection digunakan untuk merubah style element yabg di pilih tetapi hanya berfungsi untuk beberapa property yakni:
- Color
- Background
- Cursor
- Outline
Syntax: ::selection {
css declarations;
}