如何样式＆lt; blockquote＆gt;使用CSS的元素使用：之前：无触摸任何HTML之后

Question

给定HTML引用，我希望CSS在打开和关闭 QUOTES中自动包装“无触摸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>

以下CSS起作用，但仅部分是：

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

开头报价正确，但关闭引号不是在报价结束后直接放置在点点点所在的位置。同样，报价看起来像是在下一行的垂直误差。

这是一个问题的示例，带有最近电影的引用：

如何以优雅的方式修复它？谢谢！
随意在答案中尝试不同的简单或疯狂的布局，以使其成为社区使用的永恒解决方案。

Answer 1

保留引号内联并制作p元素内联元素

blockquote {
  font-style: italic;
}
blockquote > p {
  display:inline;
}
blockquote:before {
  content: '“';
}
blockquote:after {
  content: '”';
}

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

或定位p元素

blockquote {
  font-style: italic;
}
blockquote > p:before {
  content: '“';
}
blockquote > p:after {
  content: '”';
}

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