如何仅用CSS隐藏Chromium原生音频播放器总时长前的斜杠

问题场景 #

在Chrome内核浏览器中，通过::-webkit-media-controls-current-time-display伪元素隐藏原生<audio>的当前时间显示后，总时长元素前会出现多余的"/"符号，尝试对当前时间伪元素使用:first-letter等方法无法隐藏该斜杠，需要纯CSS方案避免JS性能损耗。

核心原因 #

斜杠并非属于::-webkit-media-controls-current-time-display的内容，而是当当前时间被隐藏时，::-webkit-media-controls-duration-display（总时长元素）的前缀字符——之前的选择器目标错误，导致样式不生效。

解决方案1：针对总时长元素使用:first-letter #

这是最直接的方法，直接选中总时长元素的第一个字符（即斜杠）并隐藏：

/* 隐藏当前时间显示 */
audio::-webkit-media-controls-current-time-display {
    display: none;
}

/* 隐藏总时长前的斜杠 */
audio::-webkit-media-controls-duration-display::first-letter {
    display: none;
}

解决方案2：文本缩进/裁剪（兼容备选） #

如果部分Chrome版本中:first-letter对该伪元素不生效，可以通过视觉手段隐藏斜杠：

方法A：文本缩进+溢出隐藏

audio::-webkit-media-controls-current-time-display {
    display: none;
}

audio::-webkit-media-controls-duration-display {
    display: inline-block;
    text-indent: -0.6em; /* 根据字体调整数值，刚好覆盖斜杠 */
    overflow: hidden;
    margin-left: 0.6em; /* 抵消缩进避免内容左移 */
}

方法B：裁剪元素区域

audio::-webkit-media-controls-current-time-display {
    display: none;
}

audio::-webkit-media-controls-duration-display {
    clip-path: inset(0 0 0 0.6em); /* 从左侧裁剪掉斜杠宽度 */
    margin-left: -0.6em; /* 调整位置避免空白 */
}

测试代码 #

将上述CSS与以下HTML配合测试：

<audio controls src="https://www.w3schools.com/tags/horse.ogg"></audio>

内容的提问来源于stack exchange，提问作者Overclocked Skid