Классическая блок-кавычка HTML, состоящая из специальных символов, центрированных сверху и снизу. ⇐ Html

[Anonymous]

Я пытаюсь создать классическую цитату, в которой нижняя и верхняя границы содержат специальный символ, например ≋ ≍ ≡ ∼ ⨌ ⫗ ⁗ ∾ ∿, центрированный в собственном поле с цветом фона, выходящим за верхнюю и нижнюю границы.
Это там, где я сейчас нахожусь. Возможно, это трудный вопрос, но после многих лет мечтаний о таком классическом стиле блочных цитат я, наконец, решил, что готов посвятить время и свои собственные баллы одной или нескольким наградам за вознаграждение, чтобы внести свой вклад в достижение этой цели для сообщества.

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

blockquote{
margin: 1em -1em 0 -1em;
padding: .5em 1em .5em 1em;
border-left: 4px double #CCC;
border-right: 4px double #CCC;
border-top: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
background: hsla(0,0%,0%,0.025)
}
blockquote > p{ display:inline; }
blockquote:before {content: '“';margin-right: 0em}
blockquote:after  {content: '”'; margin-left: -.25em}


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.

Структуру HTML нельзя изменить по двум причинам: 1) большинство веб-сайтов CSM в любом случае не позволяют этого и 2) поскольку изменение HTML только для макета не имеет семантического значимого преимущества, поэтому просто для стилизации этой классической цитаты все стили должны быть возможны в текущих или будущих выпусках CSS.

Подводя итог: я хотел бы решить классическую задачу с цитатами только в CSS, и для этого любой и все ответы, которые решают один или все следующие пункты, очень помогают:

• Поместите специальный символ, например ∿, поверх верхней и нижней границы;
• Автоматически центрируйте символ по горизонтали, независимо от ширины цитаты;
• Разрешите закрасить фоновое поле, чтобы скрыть границу позади символа.

Конечный результат отфотошопления может выглядеть примерно так:


Демо

Подробнее здесь: https://stackoverflow.com/questions/727 ... -character