使用类似于word的html中的符号可视化换行符和段落符

Question

是否有可能以可视化方式在html中可视化换行符和段落分隔符，就像在word中一样？

Answer 1

据我所知，答案是肯定的，仅CSS 是，CSS和JavaScript是。

在本段的最后，::after选择器开始了：

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

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

但是，<br>除非您想使用JavaScript（请参阅下文），否则这在上无法可靠地工作。
检查以下问题以获取有关该问题的更多详细信息：

• “您可以<br \>使用CSS作为目标吗？”
• “ <br>仅使用CSS的换行符（如）”

仅CSS（不兼容跨浏览器）

此仅CSS解决方案在以下浏览器（Windows 10）上对我适用：
Chrome 56和Opera43。在Firefox 51，IE 11或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解决方案（跨浏览器）

如果您可以使用JavaScript，这是我的常用方法。
免责声明：我对JS没有经验，也许有更好的方法。
对我来说，这适用于上述所有浏览器。

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>