After conducting thorough research on the issue, I have come across various solutions that could potentially address it. However, despite my best efforts, I am unable to implement these solutions successfully.
The problem at hand involves providing a color background for each line in a block of multi-line text.
Specifically, the challenge I'm facing is as follows: when I nest the text (h2) within a span tag assigned with a class, the entire block gets highlighted instead of individual lines. My goal is to extend the color only up to the end of each line, not the entire block of text.
Although I have included both my HTML and CSS code below, I cannot seem to identify where I am making a mistake. Here is a reference link illustrating what I aim to achieve:
http://css-tricks.com/text-blocks-over-image/
HTML:
<h2><span class="lyrics">
"Some come in the form of codependence<br>
A lot of times only end up being codefendants<br>
Ten bucks say they tell for a lower sentence<br>
And leave you up under the jail, begging for a penance<br>
It don't make no sense, what happened to the loyalty?<br>
Honor amongst crooks, trust amongst royalty<br>
I'd rather go out in a blaze, than give 'em the glory<br>
(How many of us have...) a similar story"<br><br>
-???
</span></h2>
CSS:
h2 > .lyrics {
background: rgba(0,0,0,0.3);
float: left;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
line-height: 1.5;
margin-left: 50px;
margin-top: 200px;
position: relative;
}