使用CSS更改链接文本

Question

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

我希望用CSS修改超链接的文本内容，但是没有成功。

a.testclass {
  display: none;
}

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

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

display:none对我有效，但新的文本没有显示。

- Kronkorken der Bärtige

---

你的类名末尾有一个不必要的分号。 - Andrew Adam

“display：none 对我起作用了” - 但你所展示的代码中，HTML 中类名写错了。 “但新的文本没有显示”，因为你将整个元素设置为 display:none，所以你看不到它。 - CBroe

Answer 1

使用font-size:0;将原始文本隐藏，然后在::after选择器中添加原始字体大小即可：

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

---

你知道这是否会涉及到可访问性问题吗？ - Dmitry Minkovsky

@DmitryMinkovsky https://tink.uk/accessibility-support-for-css-generated-content/. 我猜您只是通过字体大小隐藏原始文本-屏幕阅读器将读取两个内容，并不知道其中一个是要隐藏的。 - Pete

Answer 2

使用font-size: 0隐藏原始文本。要恢复原始大小，请使用font-size: initial。您无需关心原始值。"最初的回答"

a.testclass {
  font-size: 0;
}

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

- ﾤ ﾡ

Answer 3

试试这个：

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

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

- Bijal Patel

Answer 4

试试这个

a.testclass {
  visibility:hidden;
}
a.testclass:before {
  content: 'new text';
  visibility:visible;
}

<a class="testclass" href="example.com">Link</a>

- Osama Hussain