Belajar css pseudo-elements

belajar css

Apa itu pseudo-elements ?

Pseudo-element pada CSS digunakan untuk memberikan style pada elemen, dan Anda bisa memberikan style tanpa menambahkan atribut ID atau class. Dengan pseudo-element Anda bisa memberikan style seperti: memberikan style pada paragraf pertama untuk membuat efek drop cap, memasukan beberapa konten pada elemen sebelum atau sesudah, memberikan efek seleksi pada elemen yang dipilih pengguna dll. Berikut gambaran syntax dari pseudo-element:

selector :: pseudo-element { property : value ; }

Perbedaan pseudo-element dan pseudo-classes

Pseudo-element dan pseudo-classes sekilas mungkin hampir sama, tetapi itu berbeda. Berikut perbedaannya:

  • pseudo-element dimulai dengan titik dua ganda ( :: )
  • pseudo-classes dimulai dengan titik dua tunggal ( : )

Sebanarnya jika Anda menggunakan titik dua tunggal atau pun titik dua ganda pada pseudo-classes atau pun pseudo-element, semuanya akan bekerja.

titik dua ganda menggantikan notasi titik dua tunggal untuk pseudo-element dalam CSS3. Ini merupakan upaya dari W3C untuk membedakan antara pseudo-classes dan pseudo-element

Syntax titik dua tunggal digunakan untuk kedua pseudo-classes dan pseudo-element dalam CSS2 dan CSS1. Untuk kompatibilitas, syntax titik dua tunggal dapat diterima untuk CSS2 dan CSS1 pseudo-element.

::first-line pseudo-element

::first-line pseudo-element digunakan untuk menambah style khusus pada baris pertama dari teks. Contoh berikut memberikan style pada baris pertama untuk teks paragraf. Panjang baris pertama tergantung pada ukuran jendela browser.

Contoh:

Editor Online
  1. p::first-line {
  2. color: #ff0000;
  3. font-variant: small-caps;
  4. }

::first-line pseudo-element hanya dapat diterapkan untuk unsur-unsur elemen yang mempunyai display block. Property berikut dapat diterapkan pada ::first-line pseudo-element:

  • property font
  • property color
  • property background
  • property word-spacing
  • property letter-spacing
  • property text-decoration
  • property vertical-align
  • property text-transform
  • property line-height
  • clear

::first-letter pseudo-element

::first-letter pseudo-element digunakan untuk menambah style khusus untuk huruf pertama dan pada baris pertama dari teks. Contoh berikut memberikan style pada huruf pertama dari teks paragraf dan membuat efek seperti drop cap.

Contoh:

Editor Online
  1. p::first-letter {
  2. color: #ff0000;
  3. font-size: xx-large;
  4. }

::first-letter pseudo-element hanya dapat diterapkan untuk unsur-unsur elemen yang mempunyai display block. Property berikut dapat diterapkan pada ::first-letter pseudo-element:

  • property font
  • property color
  • property background
  • property margin
  • property padding
  • property border
  • property text-decoration
  • property vertical-align (hanya jika “float” adalah “none”)
  • property text-transform
  • property line-height
  • property float
  • clear

::before pseudo-element

::before pseudo-element digunakan untuk memasukkan konten “sebelum” pada elemen HTML. Anda bisa menggunakan property content seperti contoh dibawah ini untuk menghubungkannya dengan pseudo-element, yang bertujuan untuk memasukkan konten yang ingin dihasilkan.

Pada property content Anda bisa menyisipkan string teks atau objek yang disematkan seperti gambar dan sumber daya lainnya.

Contoh:

Editor Online
  1. h1::before {
  2. content: url(https://hendky.com/editor/gambar/senyum.gif);
  3. }

::after pseudo-element

::after pseudo-element digunakan untuk memasukkan konten “sesudah” pada elemen HTML. Anda bisa menggunakan property content seperti contoh dibawah ini untuk menghubungkannya dengan pseudo-element, yang bertujuan untuk memasukkan konten yang ingin dihasilkan.

Pada property content Anda bisa menyisipkan string teks atau objek yang disematkan seperti gambar dan sumber daya lainnya.

Contoh:

Editor Online
  1. h1::after {
  2. content: url(https://hendky.com/editor/gambar/senyum.gif);
  3. }

::selection pseudo-element

::selection pseudo-element digunakan untuk memberikan style disaat pengguna menyorot teks ( menekan klik kanan lalu menyeret teks ). Anda bisa memberikan style dengan pseudo-element ini hanya property: color, bakcground, cursor dan outline.

Contoh:

Editor Online
  1. ::selection {
  2. color: green;
  3. background-color: yellow;
  4. }

Pseudo-element dengan class dan id

Pseudo-element dapat dikombinasikan dengan atribut class atau ID pada css. Contoh dibawah ini kita akan memberikan style pada paragraf pertama membuat efek drop cap dan memberikan warna pada baris pertama. 

Contoh:

Editor Online
  1. .p1::first-line {
  2. color: green;
  3. }
  4. #p2::first-letter {
  5. color: red;
  6. font-size: xx-large;
  7. }

Leave a Reply

Your email address will not be published. Required fields are marked *