<br/>和::之后或::之前

Question

我正在编写一个使用内容可编辑的HTML编辑器，我想在每一行的末尾用{{1结尾处的特殊字符（“↩”）表示换行符（<br>） }}。因此，我想添加一个伪元素<br>，其字符为::after。

content

不幸的是，这不起作用。 br::after { content: ' ↩'; } 也不起作用。

是否有其他可能达到预期效果？

Answer 1

从这个接受的答案：Which elements support the ::before and ::after pseudo-elements?

  

你可以在这里阅读http://www.w3.org/TR/CSS21/generate.html，：之后   仅适用于具有（文档树）内容的元素。 <input>   没有内容，以及<img>或<br>。

不好笑，你考虑用图像做这个吗？

content: url(image.jpg)

这句话，我正在设计一些带有::之前用于悬停在锚点上的背景叠加。

我必须指定css内容为空{content =“”} otherwize不显示。

Answer 2

:before和:after伪元素的含义模糊，并且对input等元素的支持不足。您的CSS代码无效，只是在浏览器中不受支持，而且在规范中没有真正定义。

在我认为必须由JavaScript驱动的编辑器中，您只需在DOM中插入“↩”字符（如果需要，可以在以后删除它们）。但请注意，“↩”的字体支持有限;缩小到字体大小的小图像可能会更好。

Answer 3

我还想在网络编辑器中显示<br>。 当我将内容添加到<br>时，它的呈现方式似乎有所不同，因此它接受::after，但是正常的换行符被删除了。 我通过utf8换行符（\ 000A）用::after再次添加了它，但是我需要更改空白显示以使其显示。

这对我有用：

.htmleditor br {
    content: " " !important;
}

.htmleditor br::after {
    content: "→\000A";
    white-space: pre;
}