Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui
tentang Pseudo Element pada artikel sebelumnya, kali ini saya akan penggunaan
pseudo Element

Berikut ini adalah 6 Pseudo Element:

  1. ::after Fungsinya untuk menyisipan konten setelah element yang di pilih,  contoh syntaxnya  adalah sebagai berikut: p::after {
      css declarations;
    }
  2. ::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;
    }
  3. ::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:

  1. ::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 .

  1. ::marker element ini digunakan untuk merubah style pada property list atau

Contoh:  ::marker {
  css declarations;
}  

Hasil dari syntax ::marker:

  1. ::selection digunakan untuk merubah style element yabg di pilih tetapi hanya berfungsi untuk beberapa property yakni:
  • Color
  • Background
  • Cursor
  • Outline

Syntax: ::selection {
      css declarations;
}

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Divider and ListTile

Hallo sobat flutter, selamat pagi, siang, sore, dan malam,...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here