图标需要用 :before pseudo css 元素换行两行

Question

对于我当前的用例，由于使用降价，我必须以编程方式设置元素的内部 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”

图标需要用 :before pseudo css 元素换行两行

Icon needs to wrap two lines with :before pseudo css element

html

css

reactjs

css-selectors

pseudo-element