How to render a FORTRAN style overlay in HTML / CSS?

Question

In FORTRAN, you can request to print a line from the previous line. When printing on old line printers, this mechanism can be used for many purposes, from simulating characters that are not in the encoding of the printer, for example. / over = for & ne ;, in shades of gray for ASCII.

What is the most efficient and reliable way to express that a line should seal the previous line in HTML / CSS, ideally, a custom tag that is "carriage return" like <br> refers to a "line"? Obviously, this will only be used in the <pre> tag.

Update. Marking overprinted lines as "line-height: 0" in the <pre> tag results in inconsistent line spacing .

CSS

div { line-height: 0; }

HTML:

<pre><div>XXXX<br>----<br>||||</div><br>XXXX<br>YYYY</pre> 

(previously defined in RetroComputing, posted here.)

Answer 1

The best thing I have so far is CSS:

.over {
    line-height: 0;
    margin-top: 0.5em;
    margin-bottom: -0.5em;
}

HTML:

<pre>
FIRST LINE
PREVIOUS LINE
<div class="over">GOOD BYE
XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE
</pre>

However, this is not close, but still not a cigar (0.6em and -0.6em look a little better because the default line height is not 1 but "about 1.2" ). The correct way would be to mark each overprint with a tag

.over { margin-top: -MAGIC; margin-bottom: -MAGIC; }

and have in HTML

<pre>FIRST LINE
PREVIOUS LINE
GOOD BYE
<div class=over>XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE</pre>

MAGIC "line-height". "1em" "font-size" . line-height , , "".

Answer 2

.element {
line-height: 0; }

http://jsbin.com/secawarizi/edit?html,css,output