将 span 在元素内向左移动

Question

我有一个特定的情况，我必须从标题的右侧到左侧浮动一个跨度。问题是它需要是 CSS2 因为它是用于 epub2-book 的。

根据我目前所拥有的（见底部），当它是一行时看起来不错：

但是少了 space，因此当它是两行时，它最终看起来像这样：

我猜这是因为 span 实际上仍然在 <h1> 的末尾，所以它移到了底线。我在有和没有 vertical-align: top; 或 top: 0; 的情况下都试过了，但那没有用。

span {
  float: left;
  display: inline-block;
  margin-right: 1em;
}

<h1>text hahaha I am such a cool text!
  <span>|left Text|</span>
</h1>

有什么办法可以把这部分移到元素的开头吗？或者让它漂浮到顶部？（是的，我知道没有 float: top;）

Answer 1

如果已知文本的宽度，您可以使用 position:absolute 和 text-indent

对其进行破解

span {
  position:absolute;
  top:0;
  left:0;
  text-indent:0px;
}

h1 {
  position:relative;
  text-indent:140px;
}

<h1>text hahaha I am such a cool text!
  <span>|left Text|</span>
</h1>

Answer 2

你必须有跨度还是可以使用 :before

h1:before {
  content: "|left Text| "
}

<h1>text hahaha I am such a cool text!
</h1>

Move span to the left within element