CODEWITHSUNDEEP
htmlcsscss-content
Daniel Hollands
Daniel Hollands

Reputation: 6681

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

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.

Upvotes: 1

Views: 641

Answers (3)

James Donnelly
James Donnelly

Reputation: 128786

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.

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115285

Building on your existing code:

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

There is no actual content to display (and thus underline/strike) and the margin is in em and so reacts to font-size changes,

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

Upvotes: 0

Huangism
Huangism

Reputation: 16448

Why not just do

ins {
   text-decoration: none;
}

this will kill the underline for the entire block but I don't see a real purpose of it since it is already in a different colour

Upvotes: 0

Related Questions