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

【问题标题】：Custom text underline(using + and - symbols)自定义文本下划线（使用 + 和 - 符号）
【发布时间】：2019-12-01 10:02:40
【问题描述】：

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

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

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

但我不知道如何使用+ 符号实现下划线。其实我知道background-image是可以的，但是如果文字太长就不行了。

如果有任何帮助，我将不胜感激。提前谢谢你。

统一更新： 简单的代码 sn-p 玩：

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

【问题讨论】：

你能把html代码发给我吗？
我认为您需要一些 JavaScript 才能完成此操作。
@ths 看到第一个答案，没有任何 JS 并且像魅力一样工作！

标签： html css underline text-decorations

【解决方案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>

【讨论】：

【解决方案2】：

这是最高效的解决方案。

.added {
    color: green;
    position: relative;
}

.added:after {
    left: 0;
    right: 0;
    top: 100%;
    height: 5px;
    content: '';
    position: absolute;
    background-size: contain;
    background-repeat: repeat-x;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" fill="green" height="24" viewBox="0 0 24 24"%3E%3Cpath d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/%3E%3C/svg%3E');
}

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

【讨论】：

它适用于短字符串，但不适用于多行文本。请参阅我的问题中的信息：Actually, I know that it is possible to have background-image, but it wouldn't work if text would be long.

【解决方案3】：

理想的方式是使用 javascript，但使用 css 是可能的，并且必须适应响应式，您将创建一个包含许多 + 的内容，并将大小限制为仅占用必要的内容，请遵循示例

.add:after{
  content: "++++++++++++++++++++++++++++++++++++++++++++++++++";
  color: green;
  font-size: 12px;
  position: relative;
  top: 17%;
  overflow: hidden;
  display: block;
}

.after-75:after{
  width:75%;
}

.add{
width: fit-content;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="add after-75">We need underline</h1>

【讨论】：