web-dev-qa-db-ja.com

リンクテキストをCSSで変更する

リンクテキストをCSSで変更したいのですが、機能しません。

a.testclass {
  display: none;
}

a.testclass:after {
  content: 'new text';
}
<a class="testclass;" href="someurl.com"> CHANGE THIS HERE </a>

表示なしは機能しますが、新しいテキストは機能しません。

htmlcsshyperlink
5
Kronkorken der Bärtige

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>
12
Pete

font-size: 0を使用して、元のテキストを非表示にします。元のサイズに戻すには、font-size: initialを使用します。元の値を気にする必要はありません。

a.testclass {
  font-size: 0;
}

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

これを試してください

a.testclass {
  visibility:hidden;
}
a.testclass:before {
  content: 'new text';
  visibility:visible;
}
<a class="testclass" href="example.com">Link</a>
0
Osama Hussain

これを試して：

a.testclass:after{
content: 'new text';
}
<a class="testclass" href="someurl.com"> </a>
0
Bijal Patel