Belajar CSS pseudo-elements

Dengan pseudo-element Anda bisa memberikan style seperti membuat efek drop cap, memasukan konten befo

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 { properti : 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.

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

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

  • properti font
  • properti color
  • properti background
  • properti word-spacing
  • properti letter-spacing
  • properti text-decoration
  • properti vertical-align
  • properti text-transform
  • properti 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.

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

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

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

::before pseudo-element

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

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

h1::before {
    content: url(https://tools.hendky.com/editor/gambar/senyum.gif);
}

::after pseudo-element

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

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

h1::after {
    content: url(https://tools.hendky.com/editor/gambar/senyum.gif);
}

::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 properti: color, bakcground, cursor dan outline.

::selection {
    color: green;
    background-color: yellow;
}

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. 

.p1::first-line {
    color: green;
}
#p2::first-letter {
    color: red;
    font-size: xx-large;
}