如何仅通过CSS去除获取到的data属性值中的指定子字符串？

首先明确：目前CSS没有原生的字符串截取/替换功能，attr()函数只能原样输出元素的属性值，无法直接对获取到的文本做处理。不过可以根据场景选择以下两种思路：

1. 修改HTML结构（最可靠的方案） #

直接把需要展示的文本单独存入新的data-*属性，避免后续需要截取前缀：

<div class="othermeta"
     data-name="Classification"
     data-content="Public" />

对应的CSS保持简单：

div.othermeta:after {
    content: attr(data-name) ": " attr(data-content);
}

这样就能直接得到预期结果：Classification: Public。

2. 不修改HTML的视觉隐藏技巧（局限性大） #

如果无法修改HTML，可以利用CSS的overflow、direction属性，通过视觉方式隐藏前缀部分，但这种方法依赖固定的字体、字号，兼容性和灵活性很差，仅适合特定场景：

div.othermeta {
    position: relative;
    font-family: monospace; /* 使用等宽字体保证字符宽度一致 */
}
/* 处理data-name，隐藏"name@"前缀 */
div.othermeta::before {
    content: attr(data-name);
    display: inline-block;
    overflow: hidden;
    width: 12ch; /* 等宽字体下，"Classification"是12个字符，设置宽度刚好容纳 */
    direction: rtl; /* 反向排列文本，让后面的内容显示在前 */
}
/* 处理data-content，隐藏"content@"前缀并添加分隔符 */
div.othermeta::after {
    content: ": " attr(data-content);
    display: inline-block;
    overflow: hidden;
    width: 10ch; /* "Public"是6个字符，加上": "留余量设为10ch */
    direction: rtl;
}

注意：这种方法仅在使用等宽字体、前缀长度固定时有效，一旦字体或文本内容变化，就会出现显示异常。

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