使用 CSS 更改链接文本

Question

我想用 CSS 更改我的链接文本，但它不起作用。

 a.testclass {
  display: none;
}

a.testclass:after {
  content: 'new text';
}

 <a class="testclass;" href="someurl.com"> CHANGE THIS HERE </a>

显示无对我有用，但对新文本无效。

原文由 Kronkorken der Bärtige 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 font-size:0; 隐藏原始文本，然后将原始字体大小添加回您之后：

 a.testclass {
  font-size:0;
}

a.testclass:after {
  content: 'new text';
  font-size:16px;         /* original font size */
}

 <a class="testclass" href="someurl.com"> CHANGE THIS HERE </a>

原文由 Pete 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 font-size: 0 隐藏原文。要恢复原始大小，请使用 font-size: initial 。您无需关心原始值。

 a.testclass {
  font-size: 0;
}

a.testclass:after {
  content: 'new text';
  font-size: initial;
}

原文由 ﾤ ﾡ 发布，翻译遵循 CC BY-SA 4.0 许可协议