使用Blockquotes

Question

我正在努力排列段落前后的引号，我已经使用了css psuedo类的内容：open-quote;在之前和之后但由于一些奇怪的原因，对齐已经遍布整个地方，我需要大约是段落大小的四倍的引号来匹配我给出的设计，最后一行文本也有很大的差距，我我整个上午一直在玩这个没有成功，我已经写了一个代码笔来演示这个，有没有人对我如何能够做这个工作有任何建议？

当增加psuedo元素的字体大小时，引号会有额外的高度，这似乎会导致问题，我已经为它们添加了边框来演示这一点。

https://codepen.io/barrypoore/pen/EQgPzz

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

p {
 font-size: 1.5em;
 line-height: 1.5em;
}

p:before {
 content: open-quote;
}

p:after {
 content: close-quote;
}

p:before,
p:after {
 display:inline;
 font-size: 6em;
 color: orange;
 border: 1px solid black;
 padding: 0;
 position: relative;
 top: .25em;
 }

Answer 1

使用Blockquotes

请勿使用p标记作为报价。您应该使用Blockquote标记。

然后在psudo课程之前和之后使用。

我已更新您的代码笔https://codepen.io/anon/pen/OQRNKB#anon-login

blockquote {
    font-size: 1.5em;
    line-height: 1.5em;
}

blockquote:before {
  content: open-quote;
}

blockquote:after {
  content: close-quote;
}

blockquote:before,
blockquote:after {
  display: inline-block;
  vertical-align: bottom;
  color: orange;
  font-size: 4em;
  top: .2em;
  position: relative;
}

在文本之前和之后显示引号

1 个答案:

使用Blockquotes