Style Paragraf Pertama Artikel dengan Pseudo Elements

Ada terpikir untuk membuat sebuah paragraf dalam artikel misal paragraf pertama dari artikel mempunyai style tersendiri jadi semacam tagline dalam artikel tersebut, akhirnya saya googling untuk mengetahui caranya.

Pseudo element, menjadi pilihan yang tepat karena hanya edit melalui CSS saja, langsung saja yah :

Contoh Mark up :

<div class="post-body">
  <p>Sebuah paragraf pertama.</p>
  <p>Paragraf berikutnya.</p>
</div>

CSS :

.post-body > p:first-child { font-size: 1.2em; font-style: italic; font-family: georgia; color: grey; }

Maka akan menghasilkan :

Gambar

Nah selanjutnya silahkan kamu bereksperimen sendiri dengan style masing-masing, dengan begini dalam sebuah artikel kamu maka paragraf pertama nya itu akan bisa di style sendiri untuk menjadi tagline atau model style lainya sesuka-suka kamu, cukup mudah bukan?

Demo live disini :

  1. Asus ZenFone Smartphone Android Terbaik

Referensi :

  1. http://www.w3schools.com/cssref/sel_firstchild.asp
  2. http://css-tricks.com/almanac/selectors/f/first-child/

Author: Mohamad Fahmi

Saya adalah seorang part-time blogger, co-founder DroidLime.com, saya besar dan tinggal di Jakarta. Menyukai hal-hal yang berkaitan dengan Web, Desain, Musik, Internet dan SEO.

Ikuti saya di Github.

Comments on “Style Paragraf Pertama Artikel dengan Pseudo Elements”