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

274

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

这是我的代码：

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

我究竟做错了什么？

css

— 布拉德利·艾尔斯
source

我不明白预期的结果。您是否要添加padding使用content。似乎无法判断是否添加了空格。

— fncomp'3

这是一个很奇怪的问题，您应该使用填充来增加空间，没有content：after，也许您不知道display：inline和display：block之间的区别？

— 2011年

我正在尝试通过内容添加填充。

— bradley.ayers 2011年

我发现当overflow: hidden块元素会截断斜体文本最后一个字符的最后几个像素时，使用此方法添加空格也很有用。在这种情况下，填充无济于事。

— 2013年

如果您想使用text-decoration: underline;任一个空格加下划线，填充都无济于事。

— dmitry_romanov 2014年

Answers:

142

说明

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

h2::after {
  content: " ";
}

但是，它将立即删除。

在匿名内联框中，

随后根据'white-space'属性折叠起来的空白内容不会生成任何匿名内联框。

从“空白”处理模型中

如果将行尾的空格（U + 0020）的“空白”设置为“正常”，“ nowrap”或“行前”，则也会将其删除。

解

因此，如果您不希望删除空格，请设置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）。他们应该防止单词之间的换行。不应将它们用作不可折叠的空间，这不是语义的。

— i
source

看来white-spaceiE11和Edge都不支持（请参见caniuse.com/#search=white-space）。因此，bradley.ayers用户的答案更好吗？（我不知道，还有其他方面，例如语义或换行行为）

— chimos

561

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

解决方案：

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

— 布拉德利·艾尔斯
source

毫无用处，这将增加一个不间断的空间。如果需要普通空间，则需要“ \ 0020”而不是“ \ 00A0”。

— Offlein 2014年

也可能值得注意的是，添加普通空间将无济于事。如果此文本和前一个元素之间没有空格，则不会添加空格。正常的空间只会塌陷到自身中。

— mheim

@Offlein，请添加\ 0020作为单独的答案，因为某些字体（例如Font Awesome）不允许\00A0显示空格，并且如果要在元素之间使用空格而不是在填充之前或之后不能使用填充

— Mousey

如何在内容中已有内容之后添加空间？

— vsync

@FrançoisDupont，您是否拥有描述此更改的资源？

— isherwood

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

最终得到如下结果：

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

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

gt（V形）字符使用fontawesome。无论出于何种原因，“内容：无；” 在最后一个图块上产生对齐问题。

— 唐·艾玛
source