纯CSS实现上下边框居中嵌特殊字符的经典blockquote引用样式

实现目标 #

我正在尝试实现一款经典blockquote引用块样式：在引用块的上下边框居中位置，放置≋、≍、≡、∼、⨌、⫗、⁗、∾、∿这类特殊装饰字符，字符所在区域自带背景色，可覆盖遮挡对应位置的边框线条。
目前我已经完成基础样式编写，为实现这款向往多年的经典引用效果，公开征集可行方案供社区开发者参考。

• 当前初步实现效果：
• 预期效果参考：
• 在线调试Demo：JSFiddle调试地址

严格约束 #

禁止修改原有HTML结构，原因有两点：

1. 绝大多数CMS网站不允许随意修改内容输出的HTML结构
2. 仅为布局效果修改HTML没有语义价值，该样式必须完全依靠现有或未来发布的CSS特性实现

核心需求拆解 #

满足任意或全部需求的方案均具备参考价值：

• 将∿这类特殊装饰字符放置在blockquote的上下边框层之上
• 无论blockquote宽度如何变化，特殊字符始终保持水平自动居中
• 特殊字符所在区域支持设置背景色，可遮挡对应位置的边框线条

现有基础代码 #

CSS部分 #

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}

HTML结构 #

<blockquote><p>
 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.
</p></blockquote>

内容的提问来源于stack exchange，提问作者Sam