关于CSS锚点定位API结合::selection伪元素：能否将文本选区作为锚点？

嘿，我来帮你梳理这两个问题的答案：

问题1：CSS锚点定位API是不是真的不支持伪元素？ #

没错，你猜得很准！目前CSS锚点定位API确实不支持任何伪元素，包括::selection和::after这类。原因很简单：伪元素只是浏览器在渲染时生成的“虚拟元素”，它们并不存在于真实的DOM结构中，而锚点定位需要依赖真实的DOM节点来作为锚点目标——没有对应的DOM实体，浏览器就没法识别它作为锚点啦。所以你用::selection尝试绑定锚点的思路，目前是走不通的。

问题2：有没有其他方法能把选中的文本当作锚点来放置tooltip？ #

当然有！咱们可以结合JavaScript来实现这个需求，核心思路是通过JS获取选区的位置信息，再动态定位tooltip元素。具体步骤如下：

• 监听页面的selectionchange事件，实时捕捉用户的文本选择操作
• 用window.getSelection()获取当前选区对象，再通过getBoundingClientRect()拿到选区的位置、宽高信息
• 创建或复用一个tooltip元素，根据选区的位置计算tooltip的定位坐标（比如让tooltip居中显示在选区上方）
• 当用户取消选区时，隐藏tooltip

给你一个简单的示例代码参考：

HTML #

<div class="content">
  <p>这是一段用于测试的文本，选中其中任意部分，就能看到tooltip啦！这是一段用于测试的文本，选中其中任意部分，就能看到tooltip啦！</p>
</div>
<div id="tooltip" style="display: none;">这是你的tooltip内容</div>

CSS #

#tooltip {
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: none; /* 避免tooltip干扰文本选择 */
}

JavaScript #

const tooltip = document.getElementById('tooltip');

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (selection.toString().trim() === '') {
    // 没有选中内容时隐藏tooltip
    tooltip.style.display = 'none';
    return;
  }

  // 获取选区的位置信息
  const rect = selection.getRangeAt(0).getBoundingClientRect();
  // 计算tooltip的位置：居中显示在选区上方
  tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
  tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 8}px`;
  tooltip.style.display = 'block';
});

这个方法能完美实现“tooltip跟随选中文本”的效果，而且兼容性比纯CSS方案好很多，毕竟目前CSS锚点定位还只有Chrome支持~

备注：内容来源于stack exchange，提问作者user2503795