Gaya Blockquote yang Sederhana dan Bagus - Trik CSS

Anonim

Blockquote ditampilkan di browser yang memenuhi standar dengan efek "tanda kutip besar sebelum", dan di IE dengan batas kiri tebal dan latar belakang abu-abu terang.
Tidak seperti teknik blockquote lainnya, gaya ini tidak memerlukan elemen level blok bersarang (seperti p). Dengan demikian, ini mengubah paragraf menjadi elemen bergaya inline agar konten tidak jatuh di bawah kutipan.

blockquote ( background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; ) blockquote:before ( color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; ) blockquote p ( display: inline; )

Contoh

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.