使用 CSS 在 <ins> 和 <del> 之间添加一个间隔

Question

我正在使用 htmldiff gem 输出一串两个输入值之间的差异。

此输出使用 <ins> 和 <del> 标记的组合，以及类 .diffins、.diffmod 和 .diffdel造型目的 - 到目前为止一切顺利，我可以毫无问题地设计所有这些。

嗯，几乎没问题，下面是一些示例输出：

Here is some text that <del class="diffmod">will be</del><ins class="diffmod">has</ins> changed.

除了 <del> 和 <ins> 之间没有间隙外，这在大多数情况下都很好，这可能是正确的，但我觉得不对。

我的问题是我正在尝试使用 CSS 来添加间隙，但结果并不如我所愿。这是我目前所拥有的：

.diffins {
  color: green;
}

.diffmod {
  color: blue;
}

del.diffmod + ins.diffmod::before {
  content: ' ';
}

.diffdel {
  color: red;
}

这增加了一个空隙，但 <ins> 标签的下划线样式延伸到 ::before 创建的 space 中。正如你在这里看到的：

我试过添加 text-decoration: overline;，但这不起作用。

有什么想法吗？干杯。

Answer 1

您可以在不调整边距或填充的情况下执行此操作，方法是使用 ::before 伪元素，方法是给它一个 inline-block 的 display 并将其内容设置为 '\A0' - 这是一个常规 space，但 ' ' 本身似乎没有任何效果：

body {
  font: 32px/40px sans-serif;
}

del.diffmod + ins.diffmod::before {
  content: '\A0';
  display: inline-block;
}

This is the <del class="diffmod">wrong</del><ins class="diffmod">perfect</ins> solution!

Answer 2

为什么不直接做

ins {
   text-decoration: none;
}

这会消除整个块的下划线，但我看不出它的真正用途，因为它已经是不同的颜色

Answer 3

基于您现有的代码：

del.diffmod + ins.diffmod::before {
  content: '';
  display: inline-block;
  margin-left: .25em; /* approx 1 character */
}

没有要显示的实际内容（因此 underline/strike）并且边距在 em 中，因此对字体大小的变化做出反应，

.diffmod {
  color: blue;
}

del.diffmod + ins.diffmod::before {
  content: '';
  display: inline-block;
  margin-left: .25em;
}

Here is some text that <del class="diffmod">will be</del><ins class="diffmod">has</ins> changed.

Adding a gap between <ins> and <del> using CSS