My current scenario requires me to dynamically set the inner HTML of an element because it utilizes markdown:
<div
className='quote-copy'
dangerouslySetInnerHTML={{
__html: body?.childMarkdownRemark?.html,
}}
/>
Within this element, I need to ensure that a quote icon is displayed over the first two lines of the paragraph. It should look like this: https://i.sstatic.net/DPZtH.png
However, my attempts so far have only been successful in displaying the icon above the first line of the paragraph as shown here: https://i.sstatic.net/a5c5P.png
I've implemented the following code in my SCSS file:
.quote-copy {
> :first-child {
&::before {
content: '';
overflow: hidden;
display: inline-block;
background: url('../../../assets/icons/quote.svg') no-repeat center;
object-fit: contain;
width: 60px;
height: 40px;
background-size: 60px 40px;
}
}
}
If anyone has suggestions on how I can accomplish showing the quote icon over the first two lines of the text, please let me know.