The following formatting strategy
<pre>Line 1<hr>Line 2<hr>Line 3</pre>renders like this for me (in Chrome) as of March 2021 (image edited to be narrower so it doesn't blur):
and currently looks like this (above is the image, below is the HTML):
Line 1
Line 2
Line 3
This is because <pre> tags live inside a div.s-prose, and .s-prose hrs currently have margin-bottom: var(--s-prose-spacing)— with the exception of...
*Inhales*
.s-prose p:last-child, .s-prose dl:last-child, .s-prose blockquote:last-child, .s-prose table:last-child, .s-prose .s-table-container:last-child, .s-prose .s-link-preview:last-child, .s-prose hr:last-child, .s-prose ol:last-child, .s-prose ul:last-child, .s-prose img:last-child, .s-prose pre:last-child, .s-prose h1:last-child, .s-prose h2:last-child, .s-prose h3:last-child, .s-prose h4:last-child, .s-prose h5:last-child, .s-prose h6:last-child, .s-prose p:only-child, .s-prose dl:only-child, .s-prose blockquote:only-child, .s-prose table:only-child, .s-prose .s-table-container:only-child, .s-prose .s-link-preview:only-child, .s-prose hr:only-child, .s-prose ol:only-child, .s-prose ul:only-child, .s-prose img:only-child, .s-prose pre:only-child, .s-prose h1:only-child, .s-prose h2:only-child, .s-prose h3:only-child, .s-prose h4:only-child, .s-prose h5:only-child, .s-prose h6:only-child
The above mega-selector does just one thing: margin-bottom: 0.
Hopefully this selector is just a "reset all the things" type of thing :) yikes