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>
<blockquote class="option-quote">
The objective of a trader is to preceive opportunities available, not the threat of pain.
</blockquote>
<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!
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: