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

2018-06-04 19:50:53

我想在一些内容后添加一个空格，但是content: " "; 似乎没有工作。

这是我的代码：

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

我究竟做错了什么？

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

h2::after {
  content: " ";
}

但是，它立即被删除。

从匿名内联框中，

随后根据“空白”属性将空白空间内容合并，不会生成任何匿名内联框。

而从“白色空间”处理模式来看，

如果行尾的空格（U + 0020）将'空白'设置为'normal'，'nowrap'或'pre-line'，它也会被删除。

因此，如果您不希望空间被移除，请将white-space设置为pre pre-wrap或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>

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

解决方案：

h2:after {
    content: "0a0";
}

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

最终结果如下：

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

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

用于GT（人字形）角色的fontawesome。无论出于何种原因“内容：无” 在最后一块瓷砖上产生对齐问题。

链接地址: http://www.djcxy.com/p/15547.html