How to add star next to blockquote text HTML?

Question

I'm building a static webpage using Jekyll and I have several option trading quotes using <blockquote> which currently looks like this:

<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>

This is working well but now I want to be able to place emphasis on a particular quote by placing a star next to a quote to signal that is it important. Here's a mockup of what I'm trying to get using Microsoft Paint:

The added star should be on the left side of the blockquote. I've looked at Put a Star notation in html which generates a star using <span> but currently, I'm only able to get it above or on the right side of the blockquote.

<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>

How can I get the star to the left side of the blockquote? In addition I would like to be able to generate multiple stars, say 3 stars, if its a really important quote. Thanks!

Answer 1

You can achieve that result with this HTML code:

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

and this CSS code:

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;
}

Here you are a Codepen example , which gives this result: