自定义文字下划线（使用+和-符号）

Question

我需要实现自定义文本修饰，请参见下图：

-用下一种样式模拟行很简单：

color: red;
border-bottom: 3px dashed; // 3px - just for example, 2.5 also looks fine.

但是我找不到如何使用+符号实现下划线的方法。实际上，我知道有可能具有background-image，但是如果文本较长，它将不起作用。

我将不胜感激任何帮助。先感谢您。

UPD：可以使用的 简单代码段：

<main>
    <h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
    <p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>

Answer 1

您可以使用如下梯度进行此操作：

.deleted {
  background:
    repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px) 
    bottom/100% 2px no-repeat;
}
.added {
  background:
    repeating-linear-gradient(to right,green 0px 1px,transparent 1px 5px) 
    bottom 0 left 2px/100% 5px no-repeat,
    linear-gradient(green,green) bottom 2px left 0/100% 1px no-repeat;
  padding-bottom:4px;
}

<main>
    <h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
    <p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>

如果您想在 +

.deleted {
  background:
    repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px) 
    bottom/100% 2px no-repeat;
}
.added {
  background:
    repeating-linear-gradient(to right,green 0 1px,transparent 1px 7px) 
    bottom 0 left 2px/100% 5px no-repeat,
    repeating-linear-gradient(to right,green 0 5px,transparent 5px 7px) 
    bottom 2px left 0/100% 1px no-repeat;
  padding-bottom:4px;
}

<main>
    <h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
    <p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>

它还适用于多行文字：

.deleted {
  background:
    repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px) 
    bottom/100% 2px no-repeat;
}
.added {
  background:
    repeating-linear-gradient(to right,green 0 1px,transparent 1px 7px) 
    bottom 0 left 2px/100% 5px no-repeat,
    repeating-linear-gradient(to right,green 0 5px,transparent 5px 7px) 
    bottom 2px left 0/100% 1px no-repeat;
  padding-bottom:4px;
}

<main>
    <h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
    <p>And here goes more text. <span class="added">This is long long long long long long long long long long text was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>