如何实现跨元素拆分文本的页面内搜索并添加组上方标识

方案1：Inline-block容器+独立绝对定位标记 #

通过将每组文本包裹在inline-block容器中，内部放置独立的标记元素并绝对定位到上方，同时保持文本内容为inline状态，确保浏览器能识别连续文本进行跨组搜索。

CSS代码 #

body {
  margin-top: 2rem;
  font-family: mono;
}

.text-group {
  display: inline-block;
  margin-right: 1rem;
  position: relative;
}

.text-group .marker {
  position: absolute;
  top: -1.2rem;
  left: 0;
  color: red;
}

.text-group .content {
  display: inline; /* 维持文本连续性，保证跨组搜索正常 */
}

HTML代码 #

<div class="text-group">
  <span class="marker">⇣</span>
  <span class="content">This_is_a_sp</span>
</div>
<div class="text-group">
  <span class="marker">⇣</span>
  <span class="content">lit_string</span>
</div>

方案2：CSS Grid布局实现顶部标记 #

利用Grid的行布局将标记和文本分别放在不同行，每组使用inline-grid确保整体文本流连续，无需绝对定位即可实现标记在上方的视觉效果，同时完全兼容浏览器搜索功能。

CSS代码 #

body {
  margin-top: 2rem;
  font-family: mono;
}

.text-group {
  display: inline-grid;
  grid-template-rows: auto auto;
  margin-right: 1rem;
}

.text-group .marker {
  color: red;
  line-height: 1;
}

.text-group .content {
  grid-row: 2;
}

HTML代码 #

<div class="text-group">
  <span class="marker">⇣</span>
  <span class="content">This_is_a_sp</span>
</div>
<div class="text-group">
  <span class="marker">⇣</span>
  <span class="content">lit_string</span>
</div>

方案优势说明 #

• 两种方案均保持文本内容连续性，Firefox和Chromium浏览器均可正常搜索跨分组的文本（如示例中的split）。
• 标记元素独立于文本内容，不会干扰浏览器的文本识别逻辑，视觉上完全符合“每组上方显示特定字符”的需求。
• 支持动态生成分组内容，只需循环渲染text-group容器即可适配实际场景。

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