Pseudo Element Before dan After Pada CSS

Pseudo Element Before dan After Pada CSS - ::before dan ::after pada CSS adalah pseudo element yang memungkinkan kita untuk menambahkan konten baru baik sebelum atau sesudah element tertentu pada halaman HTML hanya dengan meggunakan atau memanipulasi CSS tanpa harus melakukan penambahan suatu element tertentu tersebut pada kode HTML yang sudah dibuat.

Pseudo element merupakan kelas semu, dimana ada element yang tidak kelihatan, namun sebenarnya ada. Pseudo element adalah bagian dari sebuah elemen yang dapat kita beri style secara terpisah. Elemen ini bisa berupa tag <div&>, tag <a&>, tag <p&>, tag <h1&> atau yang lainnya. Bentuk pseudo element juga banyak tidak hanya ::before dan ::after. Kalau kita bisa akses element pada huruf pertama, baris pertama, konten sebelum atau konten sesudah, itu juga juga bentuk dari pseudo element.

Penggunakan tanda titik dua ( : ) pada pseudo element before dan after ada yang menggunakan 2x tanda titik 2 ( :: ) dan 1x tanda titik 1 ( : ). Keduanya sama saja. Penggunaan pseudo element before dan after dengan 2x tanda titik 2 ( :: ) merupakan versi terbaru yang hampir disupport oleh semua browser, kecuali browser IE versi 8 ke bawah tidak support untuk Penggunaan pseudo element before dan after dengan 2x tanda titik 2 ( :: ). Pseudo element before dan after dengan 2x tanda titik 2 ( :: ) secara semantik digunakan untuk membedakan antara pseudo-element dan pseudo-class ( : ).

Pada penggunaan pseudo element baik ::before atau ::after , kita akan menggunakan property CSS yang disebut dengan content. Value atau isi dari property CSS content pada pseudo element bisa berisi bermacam-macam. berikut beberapa contoh yang bisa diisikan pada property CSS content :

● String

Value property CSS content dalam bentuk string, bisa berupa tulisan atau entitas unicode yang biasanya digunakan untuk icon/glyph.

Contoh 1 :

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pseudo Element Before dan After</title> <style> div { width: 200px; height: 200px; font-size: 15px; background-color: chartreuse; line-height: 200px; text-align: center; margin : 50px auto; } div::after { content: " World !" } div::before { content : "Hi, "; } </style> </head> <body> <div>Hello</div> </body> </html>

Contoh 2 ( Icon / Glyph ) :

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pseudo Element Before dan After</title> <style> @font-face { font-family: 'Glyphicons'; src: url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format ('woff'); } i { position: relative; top: 1px; display: inline-block;; font: normal normal 16px/1 'Glyphicons'; -moz-font-smoothing: antialiased; -webkit-font-smoothing: grayscale; margin-right: 4px; } i::before { content : '\e104'; } </style> </head> <body> <i>Home</i> </body> </html>

● Image

Value property CSS content bisa berupa gambar, namun tidak bisa diresize. Kita juga bisa menggunakan value property CSS content berupa gradient baik linear-gradient atau radial-gradient .

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pseudo Element Before dan After</title> <style> h1::before { content:url(house.png) " "; } </style> </head> <body> <h1>Home</h1> </body> </html>

● Kosong

Value property content bisa juga berupa string kosong untuk membuat sebuah element baru. Bahkan value property content berupa string kosong bisa dimanfaatkan untuk membuat clearfix, yang biasanya digunakan untuk membersihkan property CSS float. Jika sebuah pseudo elemen berisi value property content berupa string kosong, kemudian di dalam pseudo element tersebut diberikan property background yang berisi image, maka kita bisa membuat ukuran imagenya di resize sesuai dengan kebutuhan.

Contoh 1 :

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pseudo Element Before dan After</title> <style> div { width: 200px; height: 200px; font-size: 15px; background-color: chartreuse; line-height: 200px; text-align: center; margin : 50px auto; position: relative; } div::before, div::after { content: ""; width: 60px; height: 60px; position: absolute; } div::before { top: -30px; left: -30px; background-color: yellow; } div::after { bottom: -30px; right: -30px; background-color: yellow; } </style> </head> <body> <div></div> </body> </html>

Value property CSS content yang bernilai string kosong juga bisa dimanfaatkan untuk membuat bubble text/speech text.

Contoh 2 :

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pseudo Element Before dan After</title> <style> body { font-family: verdana; } h3 { float: left; width: 230px; } div { float: left; width: 350px; background-color: #95968b; padding: 10px; border-radius: 5px; color: white; position: relative; font-size: 10px; line-height: 18px; text-align: justify; } div::before { content: ""; display: block; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid #95968b; position: absolute; top: 16px; left: -12px; } </style> </head> <body> <h3>Apa itu Pseudo Element Before dan After Pada CSS ?</h3> <div>Pseudo element before dan after adalah pseudo element yang memungkinkan kita untuk menambahkan konten baru baik sebelum atau sesudah element tertentu pada halaman HTML hanya dengan meggunakan atau memanipulasi CSS tanpa harus melakukan penambahan suatu element tertentu tersebut pada kode HTML yang sudah dibuat. </div> </body> </html>

● Counter

Value property content bisa diisikan dengan nilai counter ( item ) untuk memberikan style pada list.

● Quoting

Value untuk property CSS content bisa diisi dengan open-quote dan close-quote yang biasanya digunakan sebagai blok sebuah statement penting yang biasanya ditampilkan dalam tanda kutip ( “ ... “ ).

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pseudo Element Before dan After</title> <style> blockquote { font-family: verdana; font-size: 25px; font-style: italic; margin-top: 50px; line-height: 30px; position: relative; } blockquote::before, blockquote::after { content: open-quote; font-size: 50px; color: #606157; line-height: 0; position: relative; top: 15px; } blockquote::after { content: close-quote; } p { text-align: justify; margin-left: 40px; } </style> </head> <body> <blockquote> Mati itu bukan perkara besar. Yang menakutkan adalah jika kita tidak hidup.</blockquote> <p>Victor Hugo, Les Miserables</p> </body> </html>

● Breadcrumbs

Value property CSS content bisa kita manfaatkan untuk membuat breadcrumbs atau semacam navigasi untuk menunjukan lokasi suatu halaman ketika dibuka.

			<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pseudo Element Before dan After</title> <style> a { text-decoration: none; font-family: verdana; font-weight: bold; font-size: 18px; color: black; } a:first-child::before { content: "::"; } a::after { content: " >"; } a:last-child::after { content: ""; } </style> </head> <body> <p> <a href="#">Home</a> <a href="#">Template Design</a> <a href="#">Baby Pink Template</a> </p> </body> </html>