How to apply pseudo-element "before" on a multilines span

Issue

On the following image, I have two spans: one with red border (around a part of the first line) and one with green borders (around a part of second and third line). The second span, as you see, correctly wrap in two line.

Then, I link those two spans ("display: relative" spans, of course) with corresponding red and green alpha backgrounds in ":before" pseudo-elements (for specific reasons linked to overlapping annotations specifications, not related to this topic), pseudo-elements constructed like this:

    @mixin annotColors($color, $alpha) {
        border-color: $color!important;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba($color, $alpha);
            pointer-events: none;
        }
    }

    $annot-base-alpha: .25;
    &[data-annottype="dft"] { @include annotColors($color-annot-default, $annot-base-alpha); }
    &[data-annottype="sugg"] { @include annotColors($color-annot-suggestion, $annot-base-alpha); }
    &[data-annottype="good"] { @include annotColors($color-annot-good, $annot-base-alpha); }
    &[data-annottype="err"] { @include annotColors($color-annot-error, $annot-base-alpha); }
    &[data-annottype="hvy"] { @include annotColors($color-annot-heavy, $annot-base-alpha); }
    &[data-annottype="xhw"] { @include annotColors($color-annot-comprehension, $annot-base-alpha); 

And as you can see, the second (green) background does not fit its multilined span, but rather it's [left-first line, right-last line] zone. Would you have any idea how I could force that :before to "fellow" it multilined parents?

Solution

OK, I found a quite horrible solution, but at least it works. In place of having:

<span class="annotation">some text</span>

with:

.annotation {
  position: relative;
  background-color: white;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba($green, .5);
  }
}

I wrap each letters of the text in an xml tag (selection = selection.replaceAll(/(.)/g, '$1')):

<span class="annotation"><x>s</x><x>o</x><x>m</x><x>e</x><x> </x><x>t</x><x>e</x><x>x</x><x>t</x></span>

which hold the :before translucid color:

.annotation {
  background-color: white;
  &>x {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba($green, .5);
    }
  }
}

That overloads the innerHTML (especially for big selections), but as far as I tried it results in no rendering problem.

Answered By - MamorukunBE