在元素之后使用：after添加空格（“”）

我想在一些内容之后添加一个空格，但是content: " "; 似乎没有工作。

这是我的代码：

 h2:after { content: " "; } 

…这不起作用，但是这样做：

 h2:after { content: "-"; } 

我究竟做错了什么？

Answer 1

说明

值得注意的是，你的代码确实插入了一个空格

 h2::after { content: " "; } 

但是，它立即被删除。

从匿名内联框中 ，

随后根据“空白”属性将空白内容删除将不会生成任何匿名内联框。

而从“白色空间”的加工模式来看，

如果一行尾部的空格（U + 0020）的'空格'设置为'normal'，'nowrap'或'pre-line'，它也会被删除。

解

所以如果你不希望空间被删除，请将white-space设置为pre或pre-wrap 。

 h2 { text-decoration: underline; } h2.space::after { content: " "; white-space: pre; } 

 <h2>I don't have space:</h2> <h2 class="space">I have space:</h2> 

Answer 2

原来，它需要通过转义的Unicode指定。 这个问题是相关的，并包含答案。

解决scheme：

 h2:after { content: "\00a0"; } 

Answer 3

我需要这个而不是使用填充，因为我使用内联块容器在工作stream时间线中显示一系列单独的事件。 在时间轴上的最后一个事件在它之后不需要箭头。

结束了类似的东西：

 .transaction-tile:after { content: "\f105"; } .transaction-tile:last-child:after { content: "\00a0"; } 

用于gt（人字形）angular色的fontawesome。 无论出于何种原因“内容：无” 在最后一个瓷砖上产生alignment问题。