使用:after后在元素后添加空格("")

Question

我想在一些内容之后添加一个空格,但content: " ";似乎不起作用.

这是我的代码:

h2:after {
    content: " ";
}

...这不起作用,但这样做:

h2:after {
    content: "-";
}

我究竟做错了什么？

Answer 1

事实证明它需要通过转义的unicode来指定.这个问题是相关的,并包含答案.

解决方案:

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

值得一提的是,这将增加一个不打破的空间.如果你想要一个普通的空间,你需要"\ 0020"而不是"\ 00A0". (59认同)
也许值得注意的是,添加正常空间不会做任何事情.如果此文本中的文本与前一个元素之间没有空格,则不会添加一个空格.一个正常的空间将会崩溃. (4认同)
@Offlein请添加`\ 0020`作为单独的答案,因为某些字体,例如Font Awesome不允许`\ 00A0`显示空格,如果你想要*元素之间的空格*而不是之前或之后你不能使用填充 (2认同)
@FrançoisDupont,你有资源描述这种变化吗？ (2认同)

Answer 2

值得注意的是,您的代码确实插入了空格

h2::after {
  content: " ";
}

然而,它立即被删除.

随后根据"白色空间"属性折叠掉的空白内容不会生成任何匿名内联框.

如果一行末尾的空格(U + 0020)将"white-space"设置为"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>

不要使用不间断的空格(U + 00a0).他们应该防止单词之间的换行.它们不应该被用作不可折叠的空间,这不是语义的.

看来iE11或Edge不支持`white-space'（请参阅https://caniuse.com/#search=white-space）。因此，bradley.ayers用户的答案更好吗？（我不知道，还有其他方面，例如语义或换行行为） (3认同)

Answer 3

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

结束了类似的事情:

.transaction-tile:after {
  content: "\f105";
}

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

使用fontawesome作为gt(雪佛龙)角色.无论出于何种原因"内容:无;" 正在最后一个瓷砖上产生对齐问题.