通过 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+），无需前缀。
该方法本质是“视觉欺骗”——文字完整渲染，仅背景按需从右侧延伸，既保持语义化结构，又精准达成设计意图。
