技术求助：如何不使用:after通过CSS交换两个单词的顺序

Hey Niko, totally get your frustration with html2canvas ignoring pseudo-elements—let's dive into a couple of reliable CSS-only approaches that work perfectly with it.

Method 1: Flexbox + order Property (Most Straightforward) #

This is my go-to because it's clean, well-supported, and html2canvas renders flex layouts without issues. The trick is wrapping each word in a separate <span> so we can reorder them with flex's order property.

HTML: #

<div class="word-swap">
  <span>Hello</span>
  <span>World</span>
</div>

CSS: #

.word-swap {
  display: flex;
}

/* Swap the order of the two spans */
.word-swap span:first-child {
  order: 2;
}

.word-swap span:last-child {
  order: 1;
  /* Add a space between words since we're rearranging */
  margin-right: 0.5em;
}

Method 2: CSS Grid (Alternative Flex Approach) #

If you prefer grid over flex, this works just as well. We'll define a two-column grid and assign each word to the opposite column.

HTML: #

<div class="grid-swap">
  <span>Hello</span>
  <span>World</span>
</div>

CSS: #

.grid-swap {
  display: grid;
  grid-template-columns: auto auto;
}

.grid-swap span:first-child {
  grid-column: 2;
}

.grid-swap span:last-child {
  grid-column: 1;
  margin-right: 0.5em;
}

Important Note About Unmodified HTML #

If you can't edit the original HTML to add <span> elements (i.e., you have a single text node like <div>Hello World</div>), pure CSS gets tricky—there's no standard way to target individual words in a text node with CSS alone. In that case, you'd need a tiny bit of JavaScript to wrap the words in spans first, but since you asked for CSS-only, the span-wrapping methods above are your best bet.

Both flex and grid methods will render correctly in html2canvas, as they use standard layout properties that the library recognizes.

内容的提问来源于stack exchange，提问作者chigulugulu