如何通过CSS替换锚点标签内的'Media'文本而非追加内容？

现有如下HTML代码：

<li id="media-personal-li" class="current selected"><a id="user-media" href="#">Media <span>0</span></a></li>

想要通过CSS将其中的Media文本替换为My Media，但使用::before伪元素仅实现了文本追加，而非替换：

#media-personal-li a#user-media::before {
    content: "My Media";
    display: inline;
}

解决思路 #

因为Media是<a>标签内的直接文本节点（未被单独标签包裹），无法直接通过CSS选择器定位修改，所以需要先隐藏该文本节点，再通过伪元素插入新文本，同时保留<span>0</span>的正常显示。

方法一：颜色透明法（简单易实现）

通过将<a>标签的文本颜色设为透明，再重置伪元素和<span>的颜色，达到隐藏原文本、显示新内容的效果：

#user-media {
  color: transparent; /* 隐藏原有"Media"文本 */
}

#user-media::before {
  content: "My Media";
  color: initial; /* 恢复伪元素文本的默认颜色 */
  margin-right: 4px; /* 保持和数字"0"的间距，可根据需求调整 */
}

#user-media span {
  color: initial; /* 让span内的数字正常显示 */
}

方法二：绝对定位覆盖法

通过定位伪元素到原文本位置，同时隐藏原文本：

#user-media {
  position: relative;
  padding-left: 60px; /* 根据新文本长度调整，避免伪元素和span重叠 */
}

#user-media::before {
  content: "My Media";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 让伪元素垂直居中对齐 */
}

#user-media::first-line {
  visibility: hidden; /* 隐藏原"Media"文本（它是a标签的第一行内容） */
}

效果验证 #

使用上述任意一种CSS代码，都能将原Media替换为My Media，同时保留<span>0</span>的显示。

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