html - 在 :after psuedo element breaks to new line when there is a space in HTML 上向右浮动

Question

这是一个说明我遇到的问题的代码笔:

http://codepen.io/pcostanz/pen/ukzIf

我正在将排序指示符作为伪元素添加到内联 block 元素的网格中，我正在使用 :after 伪元素来执行此操作。问题是模板偶尔会在单元格内容中包含注释或空格，当 :after 伪元素 float 到单元格右侧时，这会导致伪元素换行。

单元格的宽度是通过 Angular 指令生成的，因此不能在 CSS 中设置它。

.cell {
  border: 1px solid red;
  display: inline-block;
}
.cell:after {
  content: ">";
  display: block;
  float: right;
}

<div class="cell"> Input </div>

我不太明白为什么我提出的两个解决方案有效:

1. 将元素从 :after 更改为 :before ( http://codepen.io/pcostanz/pen/vwfkg )
2. 将 margin-left: -100% 添加到伪元素 ( http://codepen.io/pcostanz/pen/HqDhA )

如有任何见解或替代解决方案，我们将不胜感激。

Answer 1

这是一个 Chrome 错误；它不会发生在 Firefox 中。末端的额外空格被隐藏，这就是 HTML 用于 block 级元素的方式。所以框的宽度设置为文本“Input”的宽度，没有空格。但它们仍然存在于 DOM 中。当您使用 :after , > 实际上只是附加到已经存在的内容上，就好像它是一个 <span> .它在不可见空间之后，现在开始生效，因为它不再是最后一个，插入>。并且 float 它不会改变父级的宽度，所以它会捕捉到一个新行。

这就是它发生的原因(错误!仅在 Chrome 中)。您的第一个解决方案有效，因为 :before从字面上插入虚构的 <span>在内容之前，所以不可见的空间不会扩展。第二种解决方案最有可能奏效，因为边距抵消了空间的右推效果，但我不确定，请不要引用我的话。

最简单的解决方案是使用 :before .语义上不正确，但是嘿，这行得通。希望这个回答对你有帮助，我写的有点不确定......