在 <ins> CSS 之间添加间隙和使用 <del> CSS

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创建的空间。如你所见:

http://codepen.io/LimeBlast/pen/LVqBeo

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

任何想法?欢呼。

Answer 1

您可以使用::before伪元素，通过将display设置为inline-block，并将其内容设置为'A0'(这是一个常规空格，但' '单独似乎没有任何影响:

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!

Codepen演示。

Answer 2

为什么不直接做呢

ins {
   text-decoration: none;
}

这将消除整个块的下划线，但我不认为它有什么真正的目的，因为它已经是不同的颜色了

Answer 3

基于现有代码构建:

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

没有实际的内容要显示(因此有下划线/划线)，并且边距是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.