html - 和 ::after 或 ::before

Question

我正在使用 content-editable 编写 HTML 编辑器，我想<br>在以<br>. ::after因此，我想添加一个带有该字符的伪元素作为content.

br::after { content: ' ↩'; }

不幸的是，这不起作用。::before也不行。

还有另一种可能达到预期的结果吗？

Answer 1

从这个公认的答案：哪些元素支持 ::before 和 ::after 伪元素？

正如您可以在此处阅读的http://www.w3.org/TR/CSS21/generate.html， :after 仅适用于具有（文档树）内容的元素。<input> 没有内容，还有<img>or <br>。

不好笑，你有没有考虑过用一张图片来做这个？

content: url(image.jpg)

这句话说，我正在用 ::before 设计一些东西，用于悬停在锚点上的背景覆盖。

我必须将 css 内容指定为空 {content=""} 否则不显示。

Answer 2

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

在我认为必须是 JavaScript 驱动的编辑器中，您可以简单地在 DOM 中插入“↩”字符（如果需要，稍后将其删除）。但是请注意，“↩”的字体支持有限；缩放到字体大小的小图像可能会更好。

Answer 3

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

这对我有用：

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

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