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

Question

I'm using the htmldiff gem to output a string of differences between two input values.

This output uses a combination of <ins> and <del> tags, along with the classes .diffins, .diffmod and .diffdel for styling purposes - so far so good, I can style all of this up without any problem.

Well, almost no problem, below is some sample output:

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

This is fine, for the most part, except there is no gap between the <del> and the <ins>, which is probably correct, but doesn't look right to me.

My problem is that I'm trying to use CSS to add a gap, but it isn't turning out as I'd like. This is what I have so far:

.diffins {
  color: green;
}

.diffmod {
  color: blue;
}

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

.diffdel {
  color: red;
}

This adds a gap, but the underline style of the <ins> tag extends into the space created by the ::before. As you can see here:

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

I've tried adding text-decoration: overline;, but this doesn't work.

Any ideas? Cheers.

Answer 1

You can do this without adjusting margins or padding by using the ::before pseudo-element by giving it a display of inline-block and setting its content to '\A0' - which is a regular space, but ' ' alone doesn't appear to have any effect:

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