让 HTML 实体位于文本上方，同时保持正常的文档流

Question

我有一个带有 html 引号的块引用，我想将其置于某些文本之上。

我遇到的问题是，当我将引号设为大时，它会产生大量空白。我已将行高设置为 0，但这似乎不起作用。

如何在文本上方设置 HTML 实体（引号），但在其下方设置自然元素流？

代码笔：https://codepen.io/emilychews/pen/XvEvqY

非常感谢您的帮助

body {
  margin:0;
  padding: 0;

  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quote-wrapper {
  width: 50%;
  background: lightgray;
}

aside.quote-mobile {
  background: lightblue;
}

.quote-mark {
  line-height: 0;
  font-size: 7.159rem;
  margin-top: 4rem;
  padding: .5rem 0 0 .5rem;
}

<div class="quote-wrapper">
  <aside class="quote-mobile">
    <p class="quote-mark">&#8223;</p>
    <blockquote class="fees-pull-quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </blockquote>
  </aside>
</div>

Answer 1

可能需要根据您的喜好进行更多设计，但这很有效：

blockquote {
  padding: 5%;
  position: relative;
  text-align: justify;
}

blockquote:before,
blockquote:after {
  font-size: 7.5rem;
  position: fixed;
  opacity: 0.2;
}

blockquote:before {
  content: '1C';
  left: 0;
  top: -2%;
}

blockquote:after {
  content: '1D';
  right: 0;
}

<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</blockquote>

让 HTML 实体位于文本上方，同时保持正常的文档流

Have an HTML Entity Sit Above Text Whilst Keeping the Normal Document Flow

html

css

html-entities