图标需要用 :before 伪 css 元素包裹两行

Question

对于我当前的用例，由于使用 markdown，我必须以编程方式设置元素的内部 html：

<div
    className='quote-copy'
    dangerouslySetInnerHTML={{
       __html: body?.childMarkdownRemark?.html,
    }}
/>

在这个元素中，我必须确保引用图标出现在设置段落的前两行，如下所示：

但是，在尝试此操作时，我仅设法使其在段落的第一行上工作，如下所示：

通过在我的 scss 文件中使用以下代码：

.quote-copy {
  > :first-child {
    &::before {
      content: '';
      overflow: hidden;
      display: inline-block;
      background: url('../../../assets/icons/quote.svg') no-repeat center;
      object-fit: contain;
      width: 60px;
      height: 40px;
      background-size: 60px 40px;
    }
  }
}

有谁知道如何让引用图标出现在副本的前两行？

Answer 1

尝试在伪元素上使用“float:left”