如何显示被float偏移元素的原始锚点？无额外HTML的CSS方案

1. 显示float偏移元素的原始锚点 #

要标记small元素未被float和负margin偏移前的原始位置，可以借助父元素的伪元素实现：

p {
  background-color: grey;
  max-width: 200px;
  position: relative; /* 作为伪元素的定位容器 */
}

small {
  float: right;
  margin-right: -120px;
  width: 100px;
}

/* 生成原始锚点标记 */
p::after {
  content: "原始锚点";
  position: absolute;
  /* 计算原始位置：父元素最大宽度减去small的宽度，对应small未偏移时的行内末尾位置 */
  left: calc(200px - 100px);
  top: 0;
  background: #ff4444;
  color: white;
  font-size: 12px;
  padding: 2px 4px;
}

原理：small未添加float和负margin时，会自然排在当前文本行的末尾，通过父元素相对定位，用绝对定位的伪元素锁定这个计算出的位置，就能直观显示原始锚点。

2. 无额外HTML元素显示XXX #

不需要新增容器，直接通过CSS定位或伪元素就能实现，分两种场景：

场景1：让XXX固定在原始锚点位置 #

直接修改mark元素的定位，把它放到锚点位置：

p {
  background-color: grey;
  max-width: 200px;
  position: relative;
}

small {
  float: right;
  margin-right: -120px;
  width: 100px;
}

mark {
  position: absolute;
  left: calc(200px - 100px); /* 和锚点位置对齐 */
  top: 0;
  background: #ffff00;
  padding: 2px;
}

场景2：原位置保留XXX，同时在锚点位置也显示 #

用mark的伪元素结合自定义属性实现，不破坏原文档流：

p {
  background-color: grey;
  max-width: 200px;
  position: relative;
}

small {
  float: right;
  margin-right: -120px;
  width: 100px;
}

mark {
  position: relative;
}

mark::after {
  content: attr(data-content); /* 读取自定义属性的内容 */
  position: absolute;
  left: calc(200px - 100px - 100%); /* 计算锚点位置 */
  top: 0;
  background: #ffff00;
  padding: 2px;
}

对应的HTML修改：<mark data-content="XXX">XXX</mark>

为什么你的伪元素+translate没效果？ #

如果是给small添加伪元素，伪元素的定位基准是small当前偏移后的位置，translate只会基于这个偏移位置再移动，自然无法对应原始锚点。必须基于父元素（未偏移的文档流容器）来定位，才能锁定原始位置。

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