CSS 你能在 :after 伪元素中添加换行符吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1672879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you add line breaks to the :after pseudo element?
提问by NibblyPig
I want to append a <br />to a particular class. Using the :after pseudo class simply displays <br />as text.
我想将 a 附加<br />到特定的类。使用 :after 伪类只是显示<br />为文本。
Is there a way to make this work?
有没有办法使这项工作？
It's internal for IE8 so browser issues aren't a problem. If I do
它是 IE8 内部的，因此浏览器问题不是问题。如果我做
<span class="linebreakclass">cats are</span> brilliant
I want "brilliant" to appear on a new line.
我希望“辉煌”出现在新的行上。
采纳答案by Robert Koritnik
You won't be able to render HTML tags but you can set style like this:
您将无法呈现 HTML 标签，但您可以像这样设置样式：
.needs-space:after {
content: " ";
display: block;
clear: both; /* if you need to break floating elements */
}
The main setting here is display: block;This will render :aftercontent inside a DIV. And this pseudo element is supported by all latest browsers. Including IE. Saying this you should be aware of your users and their browsers.
这里的主要设置是display: block;This will render :aftercontent inside a DIV. 所有最新的浏览器都支持这个伪元素。包括IE。说到这里，您应该了解您的用户和他们的浏览器。
回答by Dmitry Schetnikovich
You can use \Aescape sequence, which will render as a newline:
您可以使用\A转义序列，它将呈现为换行符：
.new-line:after {
white-space: pre-wrap;
content: "\A";
}
This method was mentioned in the CCS 2.1 Specificationfor the contentproperty:
该方法在CCS 2.1 规范中提到的content属性：
Authors may include newlines in the generated content by writing the
"\A"escape sequence in one of the strings after the'content'property. This inserted line break is still subject to the'white-space'property.
作者可以通过
"\A"在'content'属性后的字符串之一中写入转义序列来在生成的内容中包含换行符 。此插入的换行符仍受该'white-space'属性的约束 。
回答by David Snabel-Caunt
It gets worse - the :after class doesn't even work in IE6 (and probably some other browsers too).
情况变得更糟 - :after class 甚至在 IE6 中都不起作用（可能还有其他一些浏览器）。
I think what you really want here is a margin on the bottom of the element, to provide spacing.
我认为您在这里真正想要的是元素底部的边距，以提供间距。
Simply
简单地
.myElement {
margin-bottom: 1em;
}
