CSS 使用 :after 在元素后添加一个空格 (" ")
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5467605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a space (" ") after an element using :after
提问by bradley.ayers
I want to add a blank space after some content, however the content: " ";doesn't seem to work.
我想在一些内容后添加一个空格，但是这content: " ";似乎不起作用。
This is my code:
这是我的代码：
h2:after {
content: " ";
}
... which doesn't work, however this does:
...这不起作用，但是这样做：
h2:after {
content: "-";
}
What am I doing wrong?
我究竟做错了什么？
采纳答案by Oriol
Explanation
解释
It's worth noting that your code does insert a space
值得注意的是，您的代码确实插入了一个空格
h2::after {
content: " ";
}
However, it's immediately removed.
但是，它立即被删除。
From Anonymous inline boxes,
从匿名内联框，
White space content that would subsequently be collapsed away according to the 'white-space' property does not generate any anonymous inline boxes.
随后将根据“white-space”属性折叠起来的空白内容不会生成任何匿名内联框。
And from The 'white-space' processing model,
而从“空白”处理模型，
If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.
如果行尾的空格 (U+0020) 将 'white-space' 设置为 'normal'、'nowrap' 或 'pre-line'，它也会被删除。
Solution
解决方案
So if you don't want the space to be removed, set white-spaceto preor pre-wrap.
因此，如果您不想删除空间，请设置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>Do not use non-breaking spaces (U+00a0). They are supposed to prevent line breaks between words. They are not supposed to be used as non-collapsible space, that wouldn't be semantic.
不要使用不间断空格 (U+00a0)。他们应该防止单词之间的换行。它们不应该用作不可折叠的空间，这不是语义。
回答by bradley.ayers
Turns out it needs to be specified via escaped unicode. This questionis related and contains the answer.
原来它需要通过转义的 unicode 指定。这个问题是相关的并包含答案。
The solution:
解决方案：
h2:after {
content: ".transaction-tile:after {
content: "\f105";
}
.transaction-tile:last-child:after {
content: "##代码##a0";
}
a0";
}
回答by don.aymar
I needed this instead of using padding because I used inline-block containers to display a series of individual events in a workflow timeline. The last event in the timeline needed no arrow after it.
我需要它而不是使用填充，因为我使用内联块容器在工作流时间线中显示一系列单独的事件。时间线中的最后一个事件后面不需要箭头。
Ended up with something like:
结束了类似的事情：
##代码##Used fontawesome for the gt (chevron) character. For whatever reason "content: none;" was producing alignment issues on the last tile.
为 gt（雪佛龙）字符使用 fontawesome。无论出于何种原因“内容：无；” 在最后一块瓷砖上产生对齐问题。
