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

Question

无论如何可以在html中可视化换行符和段落符号，比如单词？

Answer 1

据我所知，答案是是和仅用于CSS，是用于CSS＆amp;的JavaScript。

对于段落的结尾，::after选择器开始拯救：

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

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

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

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

仅限CSS（不兼容跨浏览器）

此CSS解决方案适用于以下浏览器（Windows 10）：
Chrome 56和Opera 43.它不适用于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＆amp; 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>