和 ::after 或 ::before答案

【问题标题】： and ::after or ::before 和 ::after 或 ::before
【发布时间】：2013-10-21 15:30:11
【问题描述】：

我正在使用 content-editable 编写 HTML 编辑器，并且我想在以   结尾的每行末尾使用特殊字符 ("↩") 来指示换行符 ( )。因此我想添加一个伪元素::after，该字符为content。

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

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

是否有另一种可能达到预期的结果？

【问题讨论】：

【解决方案1】：

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

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

content: url(image.jpg)

这就是说，我正在使用 ::before 设计一些东西，用于在锚点上悬停时覆盖背景。

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

【讨论】：

【解决方案2】：

:before 和 :after 伪元素定义模糊，对 input 等元素的支持很差。您的 CSS 代码并非无效，只是在浏览器中不受支持，也未在规范中真正定义。

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

【讨论】：

【解决方案3】：

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

这对我有用：

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

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

【讨论】：