css - 您可以在 :after 伪元素中添加换行符吗？

Question

我想将 a 附加<br />到特定的类。使用 :after 伪类只显示<br />为文本。

有没有办法使这项工作？

它是 IE8 内部的，所以浏览器问题不是问题。如果我做

<span class="linebreakclass">cats are</span> brilliant

我希望“辉煌”出现在新行上。

score 71 · Accepted Answer

您将无法呈现 HTML 标签，但您可以像这样设置样式：

.needs-space:after {
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
}

这里的主要设置是display: block;This will render :after content inside a DIV. 所有最新的浏览器都支持这个伪元素。包括IE。这么说你应该知道你的用户和他们的浏览器。

score 14 · Accepted Answer

您可以使用\A转义序列，它将呈现为换行符：

.new-line:after {
  white-space: pre-wrap;
  content: "\A";
}

该方法在CCS 2.1 Specification for the contentproperty 中提到：

作者可以通过在属性"\A"后面的字符串之一中写入转义序列来在生成的内容中包含换行符。'content'这个插入的换行符仍然受制于该 'white-space'属性。

score 1 · Accepted Answer

情况变得更糟 - :after 类甚至在 IE6 中都不起作用（可能还有其他一些浏览器）。

我认为您在这里真正想要的是元素底部的边距，以提供间距。

简单地

.myElement {
    margin-bottom: 1em;
}

score 1 · Accepted Answer

您可以通过简单地从资产中添加自定义图标 ..

 &:after {
    content: url('~content/icons/drop-down-arrow.png');
  }

4 回答 4