如何在块引用文本 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 获得的模型：

添加的星号应位于块引用的左侧。我查看了Put a Star notation in 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 example，它给出了这个结果：