如何在多行跨度上应用 pseudo-element "before"

Question

在下图中，我有两个跨度：一个带有红色边框（围绕第一行的一部分）和一个带有绿色边框（围绕第二和第三行的一部分）。如您所见，第二个跨度正确地换行。

然后，我 link 这两个跨度（当然是“显示：相对”跨度）在“：之前”中具有相应的红色和绿色 alpha 背景 pseudo-elements（出于特定原因 linked to overlapping annotations specifications, not related to this topic), pseudo-elements 构造如下：

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

如您所见，第二个（绿色）背景不适合其多线跨度，而是 [left-first 行，right-last 行] 区域。你知道我怎么能强制 :before 到“fellow”它多行 parents 吗？

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

持有 :before 半透明颜色:

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

这会使 innerHTML 过载（特别是对于大的选择），但据我尝试，它不会导致呈现问题。

如何在多行跨度上应用 pseudo-element "before"

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

css

pseudo-element

multiline

scss-mixins