如何在“之前”应用伪元素。在多行程中

Question

在下面的图像上，我有两个跨度：一个带有红色边框的跨度（在第一行的一部分附近），另一个带有绿色边界（第二行和第三行的一部分）。如您所见，第二个跨度正确地包裹了两行。

然后，我将这两个跨度（当然是“显示：相对”跨度）与“伪元素”之前的红色和绿色alpha背景（出于与重叠注释规格链接的特定原因（出于特定原因） ，与此主题无关​​，是这样构建的伪元素：

    @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); 

正如您所看到的，第二个（绿色）背景不符合其多层次的跨度，而是[左至左下行，右半线]区域。您是否知道我该如何强制：在“同伴”的“多利父母”之前？

Answer 1

好的，我找到了一个非常可怕的解决方案，但至少它有效。代替：

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

用：

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

的每个字母包裹在xml标签中（selection = selection.replaceall（/

<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>

（

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

我将文本 （尤其是对于大型选择），但就我而言，它没有导致任何渲染问题。