visualize line-break and paragraph break with symbols in html similar to word

Question

Is it anyhow possible to visualize line break and paragraph breaks symbols in html, like in word?

Answer 1

As far as I know, the answer is yes and no for CSS only, yes for CSS & JavaScript.

For the end of the paragraph, the ::after selector comes to the rescue:

p::after {
  content: "¶";
  color: #6495ED;
}

<p>This is a pragraph.</p>
<p>Here goes another paragraph.</p>

However, this does not reliably work on <br>, unless you want to use JavaScript (see below).
Check these questions for further details on the issue:

• "Can you target <br \> with css?"
• "Line break (like <br>) using only css"

---

CSS only (not cross browser compatible)

This CSS only solution works for me on the following browsers (Windows 10):
Chrome 56 and Opera 43. It does not work on Firefox 51, IE 11 or Edge 38.

br {
  content: " ";
}

br::after {
  content: "↵\a";
  white-space: pre;
  color: #6495ED;
}

p::after {
  content: "¶";
  color: #6495ED;
}

<p>This is a pragraph with two sentences.<br>This is the second sentence, it follows a line break.</p>
<p>Here goes another paragraph.</p>

---

CSS & JavaScript solution (cross browser)

If you are okay with using JavaScript, here is my vanilla approach.
Disclaimer: I'm not experienced with JS, maybe there is a better way.
For me, this works with all of the browsers mentioned above.

var spanbr = document.createElement("span");
spanbr.className = "br";

var brs = document.getElementsByTagName("br");

for (var i = 0; i < brs.length; ++i) {
  brs[i].parentElement.insertBefore(spanbr, brs[i]);
}

.br::after {
  content: "↵";
  color: #6495ED;
}

p::after {
  content: "¶";
  color: #6495ED;
}

<p>This is a pragraph with two sentences.<br>This is the second sentence, it follows a line break.</p>
<p>Here goes another paragraph.</p>