Html 自定义文本到<；a>；使用CSS标记

我有两个

标签，它是

HTML

，如下所示：

<ul>
  <li><a href="#">This is my link</a></li>
  <li><a href="#">This is my link</a></li>
</ul>

---

希望有人能帮助我。多谢各位

如果您想动态创建，应该使用脚本。。 使用此snnipet： document.getElementById（“ahref1”）.innerHTML=“Google”

ulli:第一个孩子a:之前{
内容：“自定义1”；
位置：绝对位置；
颜色：淡蓝色；
背景：#fff；
宽度：100px；
文字装饰：下划线；
}
最后一个孩子a:以前{
内容：“自定义2”；
位置：绝对位置；
颜色：淡蓝色；
背景：#fff；
宽度：100px；
文字装饰：下划线；
}

谢谢您的建议。但是我正在寻找一个

CSS

解决方案我们可以不使用

a{color:#fff}

隐藏实际文本吗？在我的例子中，背景色是动态的。是的。尝试向伪元素添加白色背景色，这样它将隐藏后面的文本。是的，我尝试过。但它显示白色背景作为一个扣紧的答案。您需要进行一些CSS更改。

<ul>
  <li><a href="#">custom 1</a></li>
  <li><a href="#">custom 2</a></li>
</ul>

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  padding: 0;
  margin: 0;
}

ul li a {
  color: #fff;
  font-size: 0;
  position: relative;
}

ul li a:first-child:after {
  content: 'Custom 1';
  position: absolute;
  top: 0;
  left: 0;
}

ul li a:last-child:after {
  content: 'Custom 2';
  position: absolute;
  top: 0;
  left: 0;
}