如何对齐 blockquote 打开和关闭引号？

Question

目前我们正在使用 <blockquote> 通过 CSS 将开始和结束引号添加到字符串中，因为我们需要自定义样式。但是，它们没有与文本开头之前的开头引号和文本末尾的结束引号对齐。

我们如何解决对齐问题？

blockquote {
  font-style: italic;
  border: none;
  quotes: "1C" "1D" "18" "19";
  display: block;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}

<blockquote>
  <p>Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.</p>
</blockquote>

当前结果

预期结果

Answer 1

这是因为您的内容位于 p 标记内，而这不是内联元素，默认情况下是一个块。因此，要么删除该标签，要么将其设置为内联

删除标签

blockquote {
  font-style: italic;
  border: none;
  quotes: "1C" "1D" "18" "19";
  display: block;
  text-align:center;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}

<blockquote>
  Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.
</blockquote>

将 p 样式化为内联

blockquote {
  font-style: italic;
  border: none;
  quotes: "1C" "1D" "18" "19";
  display: block;
  text-align: center;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}

blockquote p {
  display: inline;
}

<blockquote>
  <p>Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.</p>
</blockquote>

如何对齐 blockquote 打开和关闭引号？

How to align blockquote open and close quotes?

html

css

sass

blockquote