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

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

这是我的代码:

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

我做错了什么?

当前回答

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

结果是这样的:

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

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

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

其他回答

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

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

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

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

解决方案:

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

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

这对我很管用。

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

结果是这样的:

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

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

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

试一试……

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

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

推荐文章