Как добавить звездочку рядом с текстом цитаты HTML?

Question

Я создаю статистическую веб-страницу c, используя 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:

Добавленная звезда должна быть в левой части цитаты. Я посмотрел на Поместить нотацию Star в 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 , что дает этот результат: