html - 如何使大引号正确地环绕在引文周围？

Question

我有一个简单的 div，里面有一个简短的推荐。结构如下:

<div id="testimonial">This is a testimonial.<br>A Multi-line testimonial.<br>With at least 3 lines.</div>

我想将客户评价用引号引起来，并对所有内容进行大小和颜色设置，因此我添加了以下 CSS:

#testimonial {
  font-size: 1.125rem; color: #434343;
}
#testimonial::before, #testimonial::after {
  content: '“'; font-size: 3rem; line-height: 1rem; height: 1rem; color: #c9c8c8;
};

问题是，即使我对引号同时应用了行高和高度规则，它们仍然比推荐本身的线条大得多，从而弄乱了推荐的外观和线条.

这里有一个代码笔来演示正在发生的事情: http://codepen.io/anon/pen/zxxZPE

如何使大引号与推荐文本占据相同的垂直高度，使其看起来整洁而不凌乱？

Answer 1

原来这个问题实际上是两个问题合二为一。

第一:引号上的line-height会影响最后一行的行高。因此，此处应将 "的行高最小化(我通过将引号的行高设置为 1px 来修复它)。

第二:因为引号是上标的，行高是多少并不重要，引号总是太高了。解决此问题的最佳方法似乎是在伪元素::before 和::after 上设置相对位置，并将它们向下移动 20 像素左右。

这是伪元素的更新 CSS:

#testimonial::before, #testimonial::after {
  content: '"'; font-size: 3rem; line-height: 1px; position: relative; 
  bottom: -20px; color: #c9c8c8;
};

在这里查看 codepen 演示:http://codepen.io/anon/pen/wBBJLG