Home Web HTML Mengenal Pseudo Element Dan Penggunaannya part 2

Mengenal Pseudo Element Dan Penggunaannya part 2

0

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;
}