加空格("在元素之后使用

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

这是我的代码:

h2:after {
content: " ";
}

．.． 这是行不通的，但是这个可以:

h2:after {
content: "-";
}

我做错了什么?

216409 次浏览
小开

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

解决方案:

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

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

结果是这样的:

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


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

用于字形gt字符。不管出于什么原因，“content: none;”在最后一个贴图上产生了对齐问题。

小开
最佳答案

解释

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

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)。它们应该防止单词之间的换行。它们不应该被用作不可折叠的空间，这不是语义上的。

小开

“;\00a &”可能会有问题;在伪元素中，因为它采用了定义元素的文本修饰，因此，例如，如果定义元素加了下划线，那么伪元素的空白区域也加下划线。

处理这个问题最简单的方法是定义伪元素的不透明度为零，例如:

element:before{
content: "_";
opacity: 0;
}
小开 
element::after {
display: block;
content: " ";
}

这对我很管用。

小开

试一试……

<span>first part</span>
<span>&nbsp;&#8203;</span>
<span>second part</span>

…“,# 8203;“(或“;​")允许“;第一部分”;“第二部分”;必要时进行包装


提交答案