如何让红色标记span内容盒与目标span尺寸一致，无需反复修改宽高？

问题需求 #

需要让红色标记<span class="m-red">的内容盒尺寸与水绿色背景<span class="m-aquamarine">完全一致，这样在页面上移动红色标记时，无需反复修改width和height属性。红色标记仅用于截图展示，不需要显示在段落文本中。此前尝试设置position: relative和display: inline-block导致红色标记无法正常显示，目前通过填充透明文本让容器自动扩展，但这种方式不够灵活。

可行解决方案 #

方案1：嵌套Span结构（推荐纯CSS实现） #

将红色标记Span嵌套到目标水绿色Span内部，利用父元素相对定位的特性，让红色标记自动匹配父元素尺寸。

修改后的CSS代码

.panel-one {
  position: relative;
  width: 70%;
}

.m-aquamarine {
  background-color: aquamarine;
  position: relative; /* 设置为相对定位，作为子元素绝对定位的基准 */
}

.m-red {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0.3;
  /* 无需再用透明文本填充，尺寸完全由父元素.m-aquamarine控制 */
}

修改后的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="COPY.css">
  <title>Copy</title>
</head>
<body>
    <div class="panel-one">
      <img src="https://i.sstatic.net/jralaTFd.png" width="100%">
      <p>
        <span class="m-aquamarine">
          Hey Gustaf! Azng sjczv zncsn djfandz czns!!
          <!-- 嵌套红色标记Span -->
          <span class="m-red"></span>
        </span>
        Dzns kds fdskcznc eandz ncz!?!
      </p>
    </div>
</body>
</html>

如果需要将红色标记移动到页面其他位置而非覆盖在目标元素上，只需调整.m-red的top/left/right/bottom属性即可，尺寸会始终与目标元素保持一致。

方案2：CSS变量结合JS同步尺寸（无需嵌套） #

如果不想修改HTML结构，可以通过JS获取目标元素的尺寸，赋值给CSS变量，再让红色标记引用这些变量。

CSS代码

.panel-one {
  position: relative;
  width: 70%;
}

.m-aquamarine {
  background-color: aquamarine;
}

.m-red {
  position: absolute;
  right: 720px;
  background-color: red;
  opacity: 0.3;
  /* 引用CSS变量 */
  width: var(--target-width);
  height: var(--target-height);
}

JS代码（放在HTML末尾）

const targetEl = document.querySelector('.m-aquamarine');
const redMarker = document.querySelector('.m-red');
// 获取目标元素的内容盒尺寸
const rect = targetEl.getBoundingClientRect();
// 设置CSS变量
redMarker.style.setProperty('--target-width', `${rect.width}px`);
redMarker.style.setProperty('--target-height', `${rect.height}px`);

这种方式不需要修改HTML结构，但需要JS辅助同步尺寸，适合无法调整DOM结构的场景。

方案3：伪元素替代独立Span #

如果红色标记不需要作为独立DOM元素存在，可以直接用目标元素的伪元素实现，无需额外Span标签。

CSS代码

.panel-one {
  position: relative;
  width: 70%;
}

.m-aquamarine {
  background-color: aquamarine;
  position: relative;
}

/* 用伪元素实现红色标记，默认覆盖目标元素 */
.m-aquamarine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0.3;
  /* 如需移动标记，调整top/left等属性即可 */
  /* 例如：top: 100px; left: 200px; */
}

HTML代码（无需.m-red Span）

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="COPY.css">
  <title>Copy</title>
</head>
<body>
    <div class="panel-one">
      <img src="https://i.sstatic.net/jralaTFd.png" width="100%">
      <p>
        <span class="m-aquamarine">
          Hey Gustaf! Azng sjczv zncsn djfandz czns!!
        </span>
        Dzns kds fdskcznc eandz ncz!?!
      </p>
    </div>
</body>
</html>

这种方式最简洁，适合仅需静态标记的场景。

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