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:

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-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:

Browser Support

Pseudo Element ::first-letter

Sumber: Mozilla Developer Network

Pseudo Element ::first-line

Sumber: Mozilla Developer Network

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

Salam JWD