CODEWITHSUNDEEP
htmlcsshyperlink
Kronkorken der Bärtige
Kronkorken der Bärtige

Reputation: 179

Change Link text with CSS

I want to change my link Text with CSS, but it doesn't work.

a.testclass {
  display: none;
}

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

Display none works for me but not the new text.

Upvotes: 12

Views: 28555

Answers (4)

ﾤ ﾡ
ﾤ ﾡ

Reputation: 5782

Use font-size: 0 to hide the original text. To restore the original size use font-size: initial. You won't need to care about the original value.

a.testclass {
  font-size: 0;
}

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

Upvotes: 3

Osama Hussain
Osama Hussain

Reputation: 59

Try This one

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

Upvotes: 0

Bijal Patel
Bijal Patel

Reputation: 210

Try This:

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

Upvotes: 0

Pete
Pete

Reputation: 58432

You can hide the original text by using font-size:0; then adding the original font size back to your 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>

Upvotes: 32

Related Questions