Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Tutorial ini adalah kelanjutan dari tutorial yang sudah di posting sebelumnya yakni artikel (bag.1) . Pada artikel (bag.2) ini saya akan membahas dua pseudo element CSS3 lainnya yakni : ::before dan::after.

 

::before

Penggunaan dari ::before untuk menambah suatu content sebelum element tertentu. Property content tersebut bisa : open-quote, close-quote, string, url(imagename)

Contoh 1

Penggunaan open-quote, close-quote.Pada contoh di bawah ini saya akan memberi tanda kutip pada teks Nothing is Impossible menggunakan ::before untuk tanda kutip pembuka dan menggunakan ::after untuk tanda kutip penutup :

Nothing Is Impossible

HTML

<p class="spesial">Nothing Is Impossible</p>

CSS

p.spesial::before{
content: open-quote;
}
p.spesial::after{
content: close-quote;
}

 

Contoh 2

Penggunaan content string. Dengan content string kita bisa menyisipkan content teks. Pada contoh di bawah ini saya akan menyisipkan teks Hey Guys di depan teks Nothing Is Impossible :

Nothing Is Impossible

HTML

<p class="contoh2">Nothing Is Impossible</p>

CSS

p.contoh2::before{
content: "Hey Guys, ";
}

 

Contoh 3

Penggunaan url(imagename). Menggunakan url(imagename) kita bisa memberi icon di sebelah kiri teks seperti contoh berikut :

Email

Phone

HTML

<p class="contoh3">Email</p>
<p class="contoh4">Phone</p>

CSS

p.contoh3::before{
content: url(icon_css.jpg);
}
p.contoh4::before{
content: url(icon_css2.jpg);
}

::after

Penggunaan dari ::after sama dengan ::before. Adapun perbedaannya ::after digunakan untuk menambah suatu content setelah element tertentu. Property content tersebut bisa : open-quote, close-quote, string, url(imagename). Untuk penggunaan ::after saya hanya akan memberi satu contoh,karena contoh lainnya bisa dilihat pada Contoh 1, Contoh 2 dan Contoh 3 di atas.

Contoh 1

Pada contoh ini saya membuat daftar 4 judul novel dimana ada 2 diantaranya adalah English Version. Dengan menggunakan ::after teks "English Version" saya tambahkan di belakang judul novel yang dimaksud.

  • Harry Potter and the Chamber of Secrets
  • The Hobbit
  • The Godfather
  • The Pelican Brief

HTML

<ul>
  <li class="eversion">Harry Potter and the Chamber of Secrets</li>
  <li>The Hobbit</li>
  <li class="eversion">Godfather</li>
  <li>The Pelican Brief</li>
 </ul>

CSS

.eversion::after{
   content: " ( English Version)";
   color: red;
  }