css styling sequence of span and br with a background

I am trying to style a code block in Lexical Editor for which I cannot change the markup

Basically, a code block is a flat sequence of span and br, like :

<span class='inserted'>+</span><span>let</span><span>myvar1</span><span>=</span><span>1</span><br>
<span class='deleted'>-</span><span>let</span><span>myvar2</span><span>=</span><span>2</span><br>

is there a way to style the lines with a green background color when it is 'inserted' and a red background color when it is 'deleted'

I thought about using sibling operator like

.inserted ~ span { background-color: green; }

but I can't find a way to have the sibling selection stop at the first br (or at the end of the sibling list) to make sure to select only a single line.

it would be even better if it could background-color the whole line relative to the parent container.

and of course, there is an unknown number of span between brs.

.inserted ~ span {
background-color: green;
}
.deleted ~ span {
background-color: red;
}

<div>
<span class='inserted'>+</span><span>let </span><span>myvar1 </span><span>= </span><span>1</span><br>
<span class='unchanged'> </span><span>let </span><span>myvar2 </span><span>= </span><span>2</span><br>
<span class='deleted'>-</span><span>let </span><span>myvar3 </span><span>= </span><span>3</span><br>
</div>

Since you want to color the whole line, here is an idea using border-image that you apply to the span with the specific class.

.inserted {
  border-image: conic-gradient(green 0 0) fill 0//0 100vw;
}

.deleted {
  border-image: conic-gradient(red 0 0) fill 0//0 100vw;
}


div {
  overflow: hidden;
}

<div>
  <span class='inserted'>+</span><span>let </span><span>myvar1 </span><span>= </span><span>1</span><br>
  <span class='unchanged'> </span><span>let </span><span>myvar2 </span><span>= </span><span>2</span><br>
  <span class='deleted'>-</span><span>let </span><span>myvar3 </span><span>= </span><span>3</span><br>
</div>