12

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

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

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

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

4

3 回答 3

7

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

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

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

content: url(image.jpg)

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

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

于 2013-10-29T18:46:36.407 回答
2

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

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

于 2013-10-21T16:08:25.073 回答
1

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

这对我有用:

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

.htmleditor br::after {
    content: "→\000A";
    white-space: pre;
}
于 2020-11-19T12:56:22.893 回答