How can I remove and replace content in a HTML tag using CSS? [duplicate]

Question

I need to change the content of a link, but I can only change the CSS of the page I'm working on. I tried using the content property in :before and :after pseudo elements. But I didn't find a way to replace the value with the new one. I was able only to append the content to the value specified between tags, at the beginning and at the end, instead of completely replacing it like I need.

a:before {
  content: 'ciao 1'
}

a:after {
  content: 'ciao 2'
}

<a href="https://www.w3schools.com/css/">CSS Tutorial</a>

What can I do to actually "replace" the content of the link tag?

which value you want to remove and no any button in your code..? — Bhargav Chudasama
– Bhargav Chudasama, Commented Feb 21, 2018 at 13:33

Temani Afif · Accepted Answer · 2018-02-21 13:35:43Z

8

Use a font-size trick like this:

a {
  font-size: 0;
}

a:before {
  content: 'ciao 1';
  font-size: initial;
}

<a href="https://www.w3schools.com/css/">CSS Tutorial</a>

Or visibility like this:

a {
  visibility: hidden;
}

a:before {
  content: 'ciao 1';
  visibility: visible;
}

<a href="https://www.w3schools.com/css/">CSS Tutorial</a>

answered Feb 21, 2018 at 13:35

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luuuud · Accepted Answer · 2018-02-21 13:36:53Z

0

It is possible, although it is kind of hacky. But then again: changing content through CSS is kind of hacky anyway. You can set the font-size of the actual link (<a>) to 0px, and then "reset" the font-size for the pseudo elements.

a{
  font-size: 0px;
}
a:before,
a:after{
  font-size: 16px;
}
a:before {
  content: 'ciao 1'
}

a:after {
  content: 'ciao 2'
}

<a href="https://www.w3schools.com/css/">CSS Tutorial</a>

answered Feb 21, 2018 at 13:36

Luuuud

4,4792 gold badges27 silver badges34 bronze badges

2 Comments

m4n0 Over a year ago

Rare to find accepted negatives.

AndrewL64 Over a year ago

@ManojKumar I think it is down-voted because even though this answer is a copy-pasted version of TemaniAfif's answer below, Temani's answer wasn't marked as the right one.

Collectives™ on Stack Overflow

How can I remove and replace content in a HTML tag using CSS? [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related