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

我想在一些内容后加一个空格，然而内容:“”;好像不管用。

这是我的代码:

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

我做错了什么?

结果是它需要通过转义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'也会被删除。

解决方案

所以，如果你不希望空间被移除，将空白设置为pre或pre-wrap。

h2 { 文字修饰:下划线; ｝ h2。空间::{后内容:“”; 空白:前; ｝ <h2>我没有空间:</h2> <h2 class="space">我有空格:</h2>

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

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

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

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

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

这对我很管用。

试一试……

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

……”& # 8203;“(或“&ZeroWidthSpace;”)允许“第一部分”和“第二部分”在必要时自动换行

推荐文章