Переместить интервал влево внутри элемента

Question

У меня есть конкретный c случай, когда мне нужно всплеск пролета справа налево от заголовка. Проблема в том, что это должен быть CSS2, так как это для epub2-book.

С тем, что я имею до сих пор (см. Внизу), это выглядит хорошо, когда одна строка:

, но с меньшим количеством места, э-э go, когда это две строки, в конечном итоге это выглядит так:

Я полагаю, это происходит, потому что промежуток все еще на самом деле в конце <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

У вас должен быть интервал или вы можете использовать : до

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

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