Как стилизовать элемент с помощью CSS, используя :before :after БЕЗ касания HTML ⇐ Html

[Anonymous]

Для примера HTML-кавычки, где я хотел бы, чтобы CSS автоматически переносил открывающие и закрывающие кавычки, не затрагивая HTML.

Код: Выделить всё

I love you not only for what you are, but for what I am when I'm with you.
I love you not only for what you have made of yourself, but for what you are making of me.
I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities of the good in me.
I love you for helping me to construct of my life not a tavern, but a temple.

Следующий CSS работает, но лишь частично:

Код: Выделить всё

blockquote {font-style: italic;}
blockquote:before {content: '“'; float:left;}
blockquote:after  {content: '”'; float:right;}

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


Как это можно элегантно исправить? Спасибо!

Не стесняйтесь пробовать разные простые или необычные макеты в своем ответе, чтобы сделать этот вариант вечным решением для сообщества.

Подробнее здесь: https://stackoverflow.com/questions/726 ... t-touching