html - 是否可以在不更改 HTML 的情况下更改内联元素的顺序？

Question

我有两个内联元素，我想在不更改 HTML 代码的情况下更改这些元素的顺序。仅使用 CSS 可以做到这一点吗？我知道如何使用 flex 和 grid 等更改顺序，但这些仅适用于 block 元素，我很好奇是否也可以使用内联元素来完成

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  max-width: 300px;
  border: 2px solid red;
  margin: 2rem;
  padding: 1rem;
}
.red {
  color: red;
}
h1 {
}
h1:last-of-type {
  margin-top: 3rem;
}
span {
  border: 2px solid blue;
}

<div>
  <h1>
    <span>Lorem ipsum sit dolores</span>
    <span class='red'>EKP itd.</span>
  </h1>
  <!-- I need this without changing html -->
  <h1>
    <span class='red'>EKP itd.</span>
    <span>Lorem ipsum sit dolores</span>
  </h1>
</div>

Answer 1

如果宽度是固定的，你可以依靠 text-indent 和 position:absolute

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

.red {
  color: red;
  position:absolute;
  top:0;
  left:0;
  text-indent:0;
}
span {
  outline: 2px solid blue;
}
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  max-width: 300px;
  border: 2px solid red;
  margin: 2rem;
  padding: 1rem;
}

<div>
  <h1>
    <span>Lorem ipsum sit dolores</span>
    <span class='red'>EKP itd.</span>
  </h1>
</div>