css - Achieve <pre> result without <pre> tag

Question

Is it possible to achieve this result, where the lines nicely touch each other:

body {
  margin: 0;
  font-family: 'Courier New', monospace;
}

div pre {
  margin: 0;
}

<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>

question from:https://stackoverflow.com/questions/65928978/achieve-pre-result-without-pre-tag

Answer 1

Just removing the 'Courier New' looks like it gets you what you want:

body {
  margin: 0;
  font-family: monospace;
}

div {
  margin: 0;
  white-space: pre;
}

<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>



<div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div>