JSFiddle - React, Tailwind, and code Playground
HTML
<div class="banner-text">
<span class="banner-text__row">Какие налоги</span><br>
<span class="banner-text__row" style="font-style: italic;">“существовали“</span><br>
<span class="banner-text__row"><span>на </span><span style="color: #1effa0;">[самом деле?]</span></span>
</div>
<br><br>
<div class="banner-text" style="font-size: 24px;">
<span class="banner-text__row">Иду по улице, но тут</span><br>
<span class="banner-text__row">Путин подошёл</span><br>
<span class="banner-text__row">и говорит:</span><br>
<span class="banner-text__row" style="font-style: italic;">“Плоти. Быстро.</span><br>
<span class="banner-text__row"><span>Плоти </span><span style="color: #1effa0;">[нологи]“.</span></span>
</div>
CSS
body {
font-family: sans-serif;
background: #333;
padding: 20px;
}
.banner-text {
font-size: 16px;
line-height: 1.25;
}
.banner-text__row {
position: relative;
display: inline-block;
padding: .25em .5em 0 .5em;
}
.banner-text__row:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
z-index: -1;
}
.banner-text__row:first-child {
padding-top: .5em;
}
.banner-text__row:last-child {
padding-bottom: .25em;
background: none;
position: relative;
}
.banner-text__row:last-child:before {
width: 70%;
}