使用SCSS动态添加blockquote图像

Question

您能告诉我如何使用blockquote动态添加SCSS图片吗？

注意：的

我在此路径上有svg张图片：assets/icon/left-quote.svg

这就是我需要的。

在这里，您可以看到它来自后端的位置（即blockquote标签）。

Answer 1

您可以使用::before伪选择器，如下所示：

blockquote {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: darkblue;
}

blockquote::before {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 1em auto;
  content: url("https://upload.wikimedia.org/wikipedia/commons/2/25/Quote_left_font_awesome.svg");
}

<blockquote>
  Parties prenantes de cette organisation (marchande ou non-marchande) par rapport aux attentes et besoins
</blockquote>

使其更像SCSS：

blockquote {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: darkblue;

  &::before {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 1em auto;
    content: url("https://upload.wikimedia.org/wikipedia/commons/2/25/Quote_left_font_awesome.svg");
  }
}