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

Question

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

这是我的代码：

h2:after {
    content: " ";
}

...这不起作用，但这样做：

h2:after {
    content: "-";
}

我做错了什么？

Answer 1

原来需要通过转义的unicode来指定它。 This question是相关的，包含答案。

解决方案：

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

Answer 2

解释

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

h2::after {
  content: " ";
}

然而，它立即被删除。

来自Anonymous inline boxes，

  

随后会崩溃的空白内容   根据＆＃39;白色空间＆＃39;财产不产生任何   匿名内联框。

来自The 'white-space' processing model，

  

如果一行末尾的空格（U + 0020）有白色空格＆＃39;调成   ＆＃39; normal＆＃39;，＆＃39; nowrap＆＃39;或＆＃39; pre-line＆＃39;，它也会被删除。

解决方案

因此，如果您不想删除空格，请将white-space设置为pre或pre-wrap。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

不要使用不间断的空格（U + 00a0）。他们应该防止单词之间的换行。它们不应该被用作不可折叠的空间，这不会是语义的。

Answer 3

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

结束了类似的事情：

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

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

对于gt（雪佛龙）角色使用了fontawesome。无论出于何种原因＆＃34;内容：无;＆＃34;在最后一块瓷砖上产生对齐问题。

Answer 4

伪元素中的“ \ 00a0”可能会出现问题，因为它采用了其定义元素的文本修饰，因此，例如，如果对定义元素加下划线，则伪元素的空白元素也带有下划线。

最简单的处理方法是将伪元素的不透明度定义为零，例如：

element:before{
  content: "_";
  opacity: 0;
}

Answer 5

element::after { 
    display: block;
    content: " ";
}

这对我有用。