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 */
}
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
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
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 |
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) |
Sumber: Mozilla Developer Network
Demikian tutorial singkat tentang pseudo element ::first-letter dan ::first-line, semoga dapat bermanfaat.
Salam JWD
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com