I was in the process of creating a pricing plan inspired by https://codepen.io/chaoticpotato/pen/zYEPRYG. However, I encountered an issue where when the text within each bullet point spans across multiple lines, it causes the text to shift slightly to the left with each line. As a result, the background image of the bullet point becomes partially obscured and loses visibility as the text extends to more lines.
<ul class="featureList">
<li>2 links</li>
<li>Own analytics platform</li>
<li>Chat support</li>
<li class="disabled">Mobile application</li>
<li class="disabled">Unlimited users</li>
</ul>
.featureList {
--color: #000;
--icon: var(--redTick);
--height: 0.875rem;
margin: 0 0 2.75rem;
padding: 0;
font-weight: 500;
li {
color: var(--color);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
&:before {
content: "";
background-image: var(--icon);
background-size: cover;
display: block;
width: 1.125rem;
height: var(--height);
}
&:last-child {
margin-bottom: 0;
}
&.disabled {
--color: #b1b8c9;
--height: 1.125rem;
--icon: var(--close);
}
}
}
Has anyone encountered this issue before? I've searched online for solutions but haven't found anything that works effectively yet.