Pseudo element menyajikan aspek-aspek khusus antara lain

  1. Huruf pertama atau ::first-letter
    Sebagai contoh:
    p::first-letter
    {
         font-size: 14px;
         color: blue;

    Pada contoh di atas setiap huruf pertama yang muncul pada <p> akan berukuran 14 pixel dengan warna biru.
  2. Baris pertama atau ::first-line
    Sebagai contoh:
    p::first-line
    {
         font-size: 14px;
         color: blue;

    Pada contoh di atas tulisan yang ada pada setiap baris pertama pada <p> akan berukuran 14 pixel dengan warna biru. 
  3. Seleksi atau ::selection
    Sebagai contoh:
    ::selection
    {
         background: red;
         color: yellow;

    Pada contoh di atas, jika kita melakukan seleksi menggunakan mouse maka akan terblok dengan backgound merah dan tulisan kuning. 
  4. Sebelum atau ::before
    Dengan ::before kita dapat menginsert content pada bagian awal misalnya
    #info::before
    {
        content: “Perhatikan “;

    Maka pada tulisan yang ada pada #info akan ada tambahan di depan yaitu ‘Perhatian’ .
  5. Sesudah atau ::after
    Dengan ::after kita dapat menginsert content pada bagian belakang misalnya
    #info::after
    {
         content: ” terimakasih.”;

    Maka pada tulisan yang ada pada #info akan ada tambahan di belakang yaitu ‘ terimakasih’. 

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Pseudo element di CSS