通过 css 伪元素 `::after` 结合绝对定位，可实现背景色从元素右侧（如文字末尾“o”侧）向左收缩的效果，避免默认从左侧截断，适用于标题、标签等需强调结尾内容的场景。

在默认行为下，当为内联元素（如

）显式设置较小的 width（例如 10px），浏览器会从左向右截断内容，背景色也仅覆盖左侧区域，导致首字母“H”可见而末尾“o”被裁剪——这与设计需求相反。直接使用 float: right 或负 width 均不可行：前者会破坏文档流并导致元素偏移出视口；后者在 CSS 中无意义，width 不接受负值（除特定场景如 calc() 中的负偏移，但不解决本问题）。

正确解法是分离内容与背景：

• 将

  设为 display: inline-block 以获得宽高控制能力，并设 position: relative 作为伪元素的定位上下文；

• 使用 ::after 伪元素创建一个独立的粉色矩形，通过 position: absolute、top: 0、right: 0 锚定在文本右边界，并设置固定宽度（如 10px）和 height: 100%；
• 添加 z-index: -1 确保背景位于文字下方，不影响可读性。

✅ 完整示例代码：

hello

h1 {
  display: inline-block;
  position: relative;
  /* 可选：清除默认 margin/padding 以更精确控制 */
  margin: 0;
  padding: 0;
}

h1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background-color: pink;
  z-index: -1;
}

⚠️ 注意事项：

• 若

  内容动态变化（如多行或响应式宽度），建议将 width 移至 JavaScript 控制，或改用 max-width + overflow: hidden 配合 text-align: right 实现类似视觉效果；

• ::after 的 height: 100% 依赖父元素具有明确高度，若字体大小变化较大，可改用 line-height 或 em 单位增强一致性；
• 此方案兼容所有现代浏览器（Chrome 4+、Firefox 3.5+、Safari 5.1+、Edge 12+），无需前缀。

该方法本质是“视觉欺骗”——文字完整渲染，仅背景按需从右侧延伸，既保持语义化结构，又精准达成设计意图。