如何在块引用文本 HTML 旁边添加星号？

Question

我正在使用 Jekyll 构建一个静态网页，并且我有几个使用<blockquote>期权交易报价，目前看起来像这样：

<blockquote class="option-quote">
Risk is relative, one's perception of risk is different from anothers.
</blockquote>

&nbsp;

<blockquote class="option-quote">
The objective of a trader is to preceive opportunities available, not the threat of pain.
</blockquote>

&nbsp;

<blockquote class="option-quote">
Our minds are inherently designed to link external information with things we have already preceived in our internal mental environment
</blockquote>

这运行良好，但现在我希望能够通过在引用旁边放置一个星号来强调特定引用，以表明它很重要。 这是我尝试使用 Microsoft Paint 获得的模型：

添加的星应该在块引用的左侧。 我看过在 html中放置星号，它使用<span>生成星号，但目前，我只能将它放在块引用的上方或右侧。

<span class="red-star">★</span>
<blockquote class="option-quote">
Risk is relative, one's perception of risk is different from anothers.
</blockquote>

<blockquote class="option-quote">
<span class="red-star">★</span> Risk is relative, one's perception of risk is different from anothers.
</blockquote>

我怎样才能把星星放在块引用的左边？ 此外，我希望能够生成多颗星，比如 3 颗星，如果它是一个非常重要的引用。 谢谢！

Answer 1

您可以使用以下 HTML 代码实现该结果：

<blockquote>
   <span>★</span>
   <p>Risk is relative, one's ...</p>
</blockquote>

和这个 CSS 代码：

blockquote {
  display: flex;
  align-items: center;
  background: #eee;
  padding: 5px;
}

span {
  font-size: 2rem;
}

blockquote p {
  border-left: 5px solid grey;
  margin: 10px;
  padding: 10px;
}

这是一个Codepen 示例，它给出了以下结果：