Upon reviewing the code snippet below, I've observed that incorporating left and right padding results in a more evenly balanced color highlighting effect, as demonstrated in point 2 for further clarification:
.a {
font-size: 4em;
font-family: sans-serif;
background-color: #ff800f;
}
.b {
padding: 0 0.2em;
}
#c { width: 200px; }1. <span class="a">Hi there</span> not enough space at left/right in comparison to the height of the highlighting
<br>
2. <span class="a b">Hi there</span> better
<br>
3. <div id="c">Hello and <span class="a b">Hi there</span></div>Question: How can one automatically increase padding at the end of the first line and the beginning of the second line when a color-highlighted line is split into two parts, like "Hi / there" in example 3?
In example 3, it should ideally appear as follows: