Looking for a solution to apply line-height to text without affecting the background color? Check out the code snippet below and share your ideas if you have any. Thanks!
.nb-semnox-impact-grid {
display: block;
font-size: 60px;
text-align: center;
line-height: normal;
}
.nb-semnox-impact-grid span {
font-family: 'GilroyBold';
display: inline-block;
position: relative;
}
.nb-semnox-impact-grid span.nb-bold-font {
font-size: 135px;
}
.nb-semnox-impact-grid span.nb-bg-yellow::after {
content: '';
display: block;
background-color: #fff200;
height: 100%;
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
}
.nb-semnox-impact-grid span.nb-bg-blue::after {
content: '';
display: block;
background-color: #78d0f0;
height: 100%;
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
}<div class="nb-semnox-impact-grid">
<span class="nb-bold-font"> 47% </span> of <br> the feature <span class="nb-bg-yellow"> #landingpage </span> <br> was <span class="nb-bg-blue"> #meeting time </span>
</div>