Einfaches und schönes Blockquote Styling - CSS-Tricks

Anonim

Das Blockquote wird in standardkonformen Browsern mit dem Effekt "Große Anführungszeichen vor" und im IE mit einem dicken linken Rand und einem hellgrauen Hintergrund angezeigt.
Im Gegensatz zu anderen Blockquote-Techniken erfordert dieser Stil kein verschachteltes Element auf Blockebene (wie p). Als solches verwandelt es einen Absatz in ein Element im Inline-Stil, um zu verhindern, dass der Inhalt unter das Zitat fällt.

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

Beispiel

Pellentesque Habitant Morbi Tristique Senectus und Netus und Maleuada sind bekannt für Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sitzen amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.