使用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");
  }
}