html - 在屏幕上为 BR 提供视觉外观(在中断发生之前)

Question

阅读中this question ，似乎过去无法使用 CSS 设置换行符 (BR) 标记的样式。但是，对于最新的浏览器，情况已不再如此。我试图给某些换行符一个视觉外观，旧的文字处理器会有一种“显示代码”模式，您可以在其中将换行符视为 pi 符号。

但是，我无法在实际换行之前让效果发生，它似乎总是出现在下一行。

例如，here is a fiddle .即使我将内容设置为出现在换行符之前，它仍然显示在下一行。我需要它在换行实际发生之前出现在行尾。我还尝试过使用 background-image 而不是运气不好的内容。

Answer 1

首先，如果您查看 W3C spec for elements ，它明确指出:

Void elements
   area, base, br, col, [...]

[...]

Void elements can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag).

但是，您正在尝试向其中添加一个伪元素 ( :before)。

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.

这是有问题的。事实上，令我感到惊讶的是你的 fiddle 甚至可以工作，如果有的话我会把它描述为浏览器规范实现中的一个错误。我可以想象它会在未来的版本中崩溃，所以不要过分依赖你的解决方案。

---

也就是说，这是您问题的解决方案:

当您为 <br> 设置样式时作为display:block它会自然地表现为一个 block 元素，并从一个新行开始，连同 :before它包含的伪元素。

保留您的 br通过将其保留为内联元素与您的文本在同一行，然后添加它以使换行符出现在您的图标之后:

br:after {
    content: ' ';
    display: block
}

这样就只有:after了将出现在新行上的伪元素，而 br 的其余部分仍然保持在上一行。

jsFiddle

注意:不适用于 FireFox。但是话又说回来，您的原始代码也没有。在我的至少双
显示为一个额外的空行，你没有