CSS Pseudo-Element (VA)

Di tutorial kali ini saya ingin membahas tentang salah satu selector CSS yaitu Pseudo-Class. Dalam selector kali ini saya ingin membahas beberapa attribute yang ada dalam selector ini.

Kali ini saya ingin membahas tentang beberapa attribute yang ada, yaitu "::first-line". Di sini kita dapat memberikan style tertentu sesuai yang kita inginkan pada baris pertama sepanjang apapun itu. Pertama-tama kita mulai dengan menuliskan tag dasar HTML yaitu :

Setelah itu kita bisa menambahkan style tertentu seperti contoh yang saya gunakan, saya mengambil style internal dan membuat class dimana untuk baris pertama akan diberi warna biru dan tulisannya menjadi italic. Maka codingnya adalah :

Dan output nya adalah :

Ada juga yang disebut "::first-letter", untuk attribute ini polanya sangat persis dengan materi diatas tadi, hanya saja kita hanya mengubahkan first-line menjadi first-letter yang dimana sesuai namanya hanya mengubah alpabet pertama dari kata yang paling pertama.
Maka codingnya adalah :

Dan outputnya adalah :

 Ada juga attribute yang disebut before dan after yaitu untuk menyisipkan gambar atau simbol atau emoticon seletelah tulisan yang kita inginkan. Misalnya kita ingin memberi smile kepada pembaca maka kita dapat menyisipkannya before(sebelum) atau after(sesudah). Untuk kali ini saya mengambil contoh dengan before dan diletakkan di sebelum h1,maka jika kamu ingin mengubah menjadi after, maka gambar tersebut akan muncul setelah h1Maka codingnya adalah :

Dan codingnya adalah :

Sekian dari saya, semoga bermanfaat :)

Have a nice day and God bless you.

"The mark of a mature programmer is willingness to throw out code you spent time on when you realize it's pointless."

src="http://www.w3schools.com/css/css_pseudo_elements.asp"