html - 使用SCSS动态添加blockquote图像

你能告诉我如何使用blockquote动态添加SCSS图像吗？
注：
我在这个路径上有svg图像：assets/icon/left-quote.svg
这就是我需要的。

在这里您可以看到它来自后端（即blockquote标记）。

最佳答案

您可以使用::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");
  }
}

关于html - 使用SCSS动态添加blockquote图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47985563/