Style Blockquote simple et agréable - Astuces CSS

Anonim

Le blockquote s'affiche dans les navigateurs conformes aux normes avec l'effet «grandes citations avant» et dans IE avec une bordure gauche épaisse et un fond gris clair.
Contrairement aux autres techniques de blockquote, ce style ne nécessite pas d'élément de niveau bloc imbriqué (comme p). En tant que tel, il transforme un paragraphe en un élément de style en ligne pour empêcher le contenu de tomber sous la citation.

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; )

Exemple

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.