style a break?

by Kris Herlaar

HTML

<p>
  Here is a paragraph
  <br/>
  With a line-break inside of it
</p>
<p>
  If the above paragraph has a black box inside of it, you can style <code>&lt;br&gt;</code> tags in this browser.
</p>
<p>
  This is for: <a href="https://stackoverflow.com/questions/899252/can-you-target-br-with-css/913168#913168">https://stackoverflow.com/questions/899252/can-you-target-br-with-css/913168#913168</a>
</p>
<button onclick="replaceBreaks()">
Replace breaks
</button>

CSS

p {
  font-family: sans-serif;
  color: darkgreen;
}

br, .br {
  display: block;
  box-sizing: border-box;
  height: 2rem;
  background: black;
}

JavaScript

function replaceBreaks() {
	const brs = document.querySelectorAll('br');
  for(let br of brs) {
  	const hr = document.createElement('hr');
    hr.classList.add('br');
    br.parentNode.replaceChild(hr, br);
  }
}