如何仅用CSS让浏览器在父元素后渲染指定HTML子元素？

可以仅通过CSS实现你需要的效果，核心思路是利用CSS的定位或布局特性，在移动端将目标<span>移出父<p>的视觉范围，同时让父元素内的文本自然拼接。以下是两种可行方案：

方案一：绝对定位法 #

通过绝对定位让目标元素脱离文档流，同时利用父元素的相对定位控制其位置：

/* 宽屏默认样式，保持元素原有位置 */
.foo {
  /* 可根据需求添加默认样式 */
}

/* 移动端断点（示例为768px） */
@media (max-width: 768px) {
  p {
    position: relative;
    /* 避免父元素高度塌陷，可根据内容设置min-height */
    min-height: 1.5em;
  }
  .foo {
    position: absolute;
    left: 0;
    top: 100%; /* 将元素定位到父元素下方 */
    margin-top: 0.5em; /* 调整与父元素的间距 */
  }
}

原理：绝对定位会让.foo脱离文档流，父<p>内的One和Three会自动拼接成连续文本，.foo则被定位到<p>外部，视觉上符合需求。

方案二：Flex布局+Transform位移法 #

利用Flex调整元素顺序，再通过transform将元素移出父元素：

@media (max-width: 768px) {
  p {
    display: flex;
    flex-wrap: wrap;
    overflow: visible; /* 允许元素超出父容器范围 */
  }
  .foo {
    order: 1; /* 将.foo排到文本最后 */
    transform: translateY(100%); /* 向下位移至父元素外部 */
    margin-top: -1.5em; /* 抵消位移带来的间距重叠 */
    width: 100%; /* 让元素独占一行 */
  }
}

原理：Flex布局调整元素顺序后，transform仅改变视觉位置不影响文档流，配合overflow: visible实现元素移出父容器的效果。

注意事项 #

• 两种方法均为视觉层面的调整，DOM结构不会改变，仅适合前端展示需求；
• 需根据实际文本大小、间距调整定位或位移的数值，避免内容重叠；
• 若父<p>有背景或边框，绝对定位法可能会让.foo超出背景范围，可通过给父元素添加padding-bottom预留空间。

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