CSS - эффектная стилизация цитат с кавычками в HTML

Согласитесь, ведь не на каждом сайте можно встретить нормально оформленные цитаты. В данной заметке я стилизую их с помощью самого обычного валидного CSS2.1-кода.

Стилизация цитат с помощью CSS

blockquote {
    background: #f7f7f7;
    border-left: 1px solid #bbb;
    font-style: italic;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
}
blockquote:before {
    color: #bbb;
    content: "\201C"; /* Непечатаемый символ слева */
    font-size: 3em;
    line-height: 0.1em;
    margin-right: 0.2em;
    vertical-align: -.4em;
}
blockquote:after {
    color: #bbb;
    content: "\201D"; /* Непечатаемый символ справа */
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -.45em;
}
blockquote > p:first-child {
    display: inline;
}

Для декорации использую т.н. немецкие кавычки вида "лапки". Шрифты: Georgia, "Times New Roman", Times, serif. Междустрочный интервал: 1.5.

Как видите ничего сверх-сложного, никакой графики, - только код стилей. А теперь все это в действии.