ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Memahami Pseudo Element ::first-letter dan ::first-line

Pseudo element :first-letter dan :first-line sudah diperkenalkan mulai CSS versi 2, pada css versi 3, ditambahakan standar baru yaitu kita dapat menuliskan pseudo element mengunakan dua colon (titik dua), seperti ::first-letter, dengan tujuan untuk membedakan dengan pseudo-class, namun begitu, penggunaan single colon tetap dapat di gunakan, dengan tujuan agar compatibel dengan browser lama.

Pseudo element ::first-letter

Sesuai namanya pseudo element ::first-letter akan menseleksi huruf pertama dari element, tujuan dari pseudo element ini lebih kepada artistik, yang biasanya digunakan untuk membuat Drop Capital dimana huruf pertama dari awal tulisan yang ukurannya lebih besar dari yang lain dan memakan beberapa baris (bisanya dua baris), model seperti ini sering kita jumpai pada majalah atau koran, contoh lain adalah Initial Capital dimana huruf pertama lebih besar dari yang lain namun hanya di baris pertama saja (tidak sampai menerjang baris kedua).

GAMBAR

Perlu diperhatikan bahwa pseudo element ini hanya dapat digunakan pada element yang bersifat block, baik karena sifat element itu sendiri sebagai Block-level Element, seperti <article>, <div>, <p>, dll maupun inline element, seperti <span>, <label, <i>, dll yang memiliki property display dengan nilai block, inline-block, table-cell, maupun table-caption, perhatikan contoh berikut:

contoh penggunaan first-letter pada inline-element:

<span>
	Contoh penggunaan pseudo element first-letter...
</span>

CSS:

span::first-letter {
	/* Style */
}
Contoh penggunaan pseudo element first-letter pada inline element yang tidak memberi efek apa-apa

Setelah kita tambahkan deklarasi display:block pada element span, maka pseudo element first-letter akan berfungsi dengan baik.

span {
	display: block;
	/* style */
}
span::first-letter {
	/* style */
}
Contoh penggunaan pseudo element first-letter pada inline element yang telah diberi property display dengan value block

Contoh Penggunaan Pseudo Element ::first-letter

Contoh 1: Membuat Initial Capital dengan CSS

Untuk pembuatan Initial Capital, pertama kita buat huruf pertama menjadi besar, selanjutnya kita sesuaikan spasi antar barisnya, karena ketika huruf pertama menjadi besar, maka otomatis akan memperlebar jarak dengan baris kedua. Jarak antar baris tersebut dapat kita definisikan di parent nya atau di element ::first-letter itu sendiri, contoh berikut untuk pendefinisian di level parent:

article p::first-letter {
	color: red;
	font-size: 350%;
	font-style: italic;
}
article p {
	max-width: 300px;
	width: 100%;
	text-align: justify;
	line-height: 150%;
}

HTML

<article>
	<h2>Pseudo Element ::first-letter</h2>
	<p>
		Pseudo element ::first-letter...
	</p>
</article>

Contoh hasil dengan sample kalimat utuh:

Pseudo Element ::first-letter

Pseudo element first-letter dan first-line merupakan kombinasi yang pas untuk membuat tulisan anda menjadi lebih menarik, dengan membuat style berbeda pada baris pertama, akan memberikan nilai tersendiri sehingga membuat pembaca lebih tertarik untuk membaca baris–baris berikutnya. JagoWebDev.com

Contoh 2: Cara membuat drop capital dengan CSS

Cara pembuatan drop capital sama persis dengan initial capital hanya saja kita perlu membuat posisi element first-letter menjadi mengapung kekiri, dengan menambahkan argumen float:left, melanjutkan contoh sebelumnya, kita tambahkan style pada element first-letter menjadi:

article p::first-letter {
	color: red;
	font-size: 350%;
	font-style: italic;
	float: left;
}

Hasil yang kita peroleh:

pseudo_element_first_letter_drop_capital

Contoh 3: Cara membuat drop capital dengan thumbnail

Peenggunaan pseudo element first-letter juga dapat digabungkan dengan image thumbnail, dengan pengaturan yang pas akan menghasilkan tampilan yang menarik, pada contoh berikut, element image dan first-letter dibuat mengapung (float) ke kiri.

HTML

<article class="sample-content">
	<h2>Pseudo Element ::first-letter</h2>
	<p>
		<img src="..."/>Pseudo element...
	</p>
</article>

Style CSS sama seperti contoh sebelumnya, hanya saja kali ini kita tabahkan style untuk image nya:

article p img {
	float: left;
	margin-right: 10px;
}

Hasil:

pseudo_element_first_letter_dengan_gambar

Pseudo Element ::first-line

Sesuai namanya, pseudo element ::first-line akan menseleksi baris pertama dari suatu teks, seperti pada ::first-letter, tujuan dari pseudo element ini untuk membuat typografi effect (efek tulisan), misal membuat tebal tulisan pada baris pertama.

Yang menarik dari pseudo element ini adalah benar-benar menseleksi baris pertama dan disamping itu juga bersifat responsive, sehingga ketika kita menyertakan berbagai tag html yang mengakibatkan baris pertama terputus (seperti <br>, <div>, atau <hr>) atau mengecilkan ukuran layar, tetap saja hanya baris pertama yang akan terseleksi.

Seperti pada first-letter, pseudo element ini hanya dapat digunakan pada element yang bersifat block, baik karena sifat element itu sendiri sebagai Block-level Element, seperti <article>, <div>, <p>, dll maupun inline element, seperti <span>, <label, <i>, dll yang memiliki property display dengan nilai block, inline-block, table-cell, maupun table-caption.

Contoh penggunaan pseudo element ::first-line

Contoh 1: Membuat baris pertama tiap paragraf menjadi tebal

HTML:

<article>
	<h2>Pseudo Element ::first-line</h2>
	<p>
		Isi Paragraf...
	</p>
</article>

CSS:

article p::first-letter {
	color: red;
	font-size: 350%;
	font-style: italic;
	padding: 10px;
	float: left;
	font-weight: normal;
}
article p::first-line {
	font-weight: bold;
}
article p {
	text-align: justify;
	line-height: 130%;
}
article {
	border: 1px solid #CCCCCC;
	padding: 0 20px;
	max-width: 350px;
	width: 100%;
}

Hasilnya:

Pseudo Element ::first-line

Pseudo element ::first-line akan menseleksi baris pertama dari suatu teks, penggabungan dengan pseudo-element ::first-line akan membuat baris pertama artikel anda menjadi lebih menarik, sehingga akan membuat pembaca lebih tertarik untuk membaca keseluruhan isi artikel. Sifatnya yang responsive membuat pseudo element ini “aman” utuuk digunakan. JagoWebDev.com

Contoh 2: Memutus baris pertama dengan block-level element

Contoh selanjutnya kita putus baris pertama dengan menambahkan tag <br> setelah kata-kata first-line, hasil yang kita peroleh tampak seperti gambar berikut:

pseudo_element_first_line_dengan_element_break

Browser Support

Pseudo Element ::first-letter

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85)
Old one-colon syntax (:first-letter) 1.0 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85)
Support for the Dutch digraph IJ Not supported Not supported bug 92176 Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1) Not supported ? ?
Old one-colon syntax (:first-letter) ? 1.0 (1) ? ? ?
Support for the Dutch digraph IJ ? Not supported ? ? ?

Sumber: Mozilla Developer Network

Pseudo Element ::first-line

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (buggy when using text-transform: issue 129669) 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85) (buggy when using text-transform: issue 3409)
Old one-colon syntax (:first-line) 1.0 (buggy when using text-transform: issue 129669) 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85) (buggy when using text-transform: issue 3409)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1) Not supported ? ?
Old one-colon syntax (:first-line) ? 1.0 (1) ? ? ?

Sumber: Mozilla Developer Network

Demikian tutorial singkat tentang pseudo element ::first-letter dan ::first-line, semoga dapat bermanfaat.

Salam JWD

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  2. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  3. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  4. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  5. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  6. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  7. Menghitung Selisih Waktu Dengan PHP – Cara Termudah

  8. Memahami Fungsi Date Pada PHP

  9. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu

  10. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP