如何仅用CSS隐藏指定标签前的文本内容无需修改HTML或使用JS

开发者阿泽

2026-10-1

有两种常见的纯CSS实现方案，可以根据你的浏览器兼容要求选择：

方案1：高兼容性（兼容所有现代浏览器）

如果可以确定前缀（数字+冒号+空格）的最大长度，用ch单位配合clip-path裁剪前缀区域即可，ch是数字0的宽度，对于数字、英文标点的宽度适配度很高：

[data-selector='suggested-tag'] {
  /* 假设前缀最长为5位数字+冒号+空格，共占用7ch宽度，按需调整数值即可 */
  clip-path: inset(0 0 0 7ch);
  /* 可选：如果裁剪后左边留白太多，加个负margin把内容拉回左侧 */
  margin-left: -7ch;
}

如果父级背景为纯色，也可以用绝对定位的伪元素覆盖前缀：

[data-selector='suggested-tag'] {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    /* 同样按需调整宽度，和前缀宽度一致即可 */
    width: 7ch;
    /* 背景色和li的父容器背景色保持一致 */
    background: #fff;
  }
}

方案2：自适应前缀长度（无需固定前缀长度，兼容Chrome 125+、Firefox 131+）

用CSS锚点定位，自动获取<strong>标签的左侧位置作为覆盖区域的右边界，不管前缀多长都可以自动适配：

[data-selector='suggested-tag'] {
  position: relative;
  /* 定义锚点容器 */
  anchor-name: --tag-root;
  &::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    /* 右边界对齐到strong标签的左边界，刚好完全覆盖前缀 */
    right: anchor(--strong left);
    /* 背景色和li的父容器背景色保持一致 */
    background: #fff;
  }
  strong {
    /* 给strong定义锚点名 */
    anchor-name: --strong;
  }
}