如何将SVG锚定到文本？实现自定义下划线跟随文本元素

方案一：将SVG作为span的背景图（最简洁） #

这种方式无需额外的img标签，直接通过CSS背景实现，天然支持响应式：

1. 移除原有的独立<img>标签
2. 给目标span添加背景样式，让SVG对齐文本底部

修改后的HTML：

<div class="title-wrapper">
  <h1 class="main--title">This works like <span class="main--title-magic">magic</span></h1>
</div>

对应的CSS：

.main--title-magic {
  position: relative;
  /* 引入SVG作为背景 */
  background-image: url('./images/magic_underline.svg');
  background-repeat: no-repeat;
  /* 让背景对齐文本底部左侧 */
  background-position: bottom left;
  /* 适配SVG：宽度占满span，高度根据需求调整 */
  background-size: 100% 0.5em;
  /* 给下划线预留空间，避免和文本重叠 */
  padding-bottom: 0.3em;
}

方案二：保留img标签（适合SVG需交互/动态修改场景） #

如果必须保留独立的SVG图片元素，通过相对+绝对定位实现跟随效果，同时保证响应式：

1. 将<img>标签移入目标span内部
2. 给span设置position: relative作为定位上下文，同时设置display: inline-block确保跟随文本换行
3. 给img设置绝对定位，让它铺满span的宽度

修改后的HTML：

<div class="title-wrapper">
  <h1 class="main--title">This works like 
    <span class="main--title-magic">
      magic
      <img src="./images/magic_underline.svg" alt="" class="magic--underline">
    </span>
  </h1>
</div>

对应的CSS：

.main--title-magic {
  position: relative;
  display: inline-block;
  /* 给下划线预留垂直空间 */
  padding-bottom: 0.3em;
}

.magic--underline {
  position: absolute;
  bottom: 0;
  left: 0;
  /* 让下划线宽度完全匹配span的文本宽度 */
  width: 100%;
  height: auto; /* 保持SVG原有比例 */
}

这两个方案都能保证下划线始终跟随文本，无论是窗口缩放还是文本换行，都能自适应变化。

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