How to Replace Text With Css

Change text using CSS

Seems like you are already using the ::after pseudo element to do your underine. This means you can't hide the text which is already there in the anchor tag. Try this solution

  .store-mart-lite-cat-prod-content .store-mart-lite-cat-prod-btn a {
     font-size: 0px; /* workaround */
  }

  .store-mart-lite-cat-prod-content .store-mart-lite-cat-prod-btn a::before {
     content: 'Ver Productos';
     font-size: 14px;
  }

How to replace text in css?

The answer is #2:

“cndy lives cehind ccfe”

The exact CSS sample appears in the spec, linked above, and the example is described as follows (emphasis mine):

The two rules below yield the same result. In the first rule all ‘a’ characters are converted to ‘b’. Subsequently, all ‘b’ characters
are converted to ‘c’. In the second rule, all ‘a’ and ‘b’ characters
are converted directly to ‘c’.

body { text-replace: "a" "b" "b" "c" }
body { text-replace: "a" "c" "b" "c" }

So the processing order goes:

 1. andy lives behind cafe
 2. bndy lives behind cbfe
 3. cndy lives cehind ccfe

Best way to replace a text using CSS

If you really need to do such things in CSS, the following is a little more logical and a little less risky (with the Usual CSS Caveats in mind):

<style>
.company-name:after{
  content: "New Company Name";
}​
</style>
<span class="company-name"></span>

That is, use an element with empty content, so you don’t need any trick to hide the dummy content.

CSS - replace part of content text

No, in pure CSS it's not possible to change the content, but you could cheat by overlapping something, e.g.

.replacer { 
  font-family: monospace; 
  position: relative; }

.replacer::before {
   background: #fff;
   position: absolute;
   content: "***";
}

Codepen demo

or, another tricky way could be creating and loading a special font that maps the symbols A, B and C into the asterisk sign (through the unicode-range property, https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range)

in javascript you would only need to replace the textContent property of the element

var el = document.getElementsByClassName('replacer')[0]
el.textContent = el.textContent.replace(/^.{3}/, '***');

How to use CSS to replace or change text?

You could do something crazy like this.

live demo

.lfr-panel-title span{
   display:none;
}

.lfr-panel-title:after{
   content: "links";   
}​

But like everyone points out.. its not recommended.

How text-replace property work in css?

Wow! You've stumbled upon a property that was last in the 2007 GCPM specification and removed in the 2010 revision. And in an online test at that! Either the test you're taking is several years out of date, or whoever set it was just pulling from random old revisions of W3C specifications and treating them all as relevant (as users have been known to do here on Stack Overflow).

Because of how esoteric this is I'm going to just answer the question. Needless to say, this answer is provided for educational purposes only. There is no text-replace property in any current CSS specification, and there hasn't been for almost a decade (neither in css-content nor css-gcpm). Don't put it in your CSS and expect it to work. It won't. If you need to do text replacements in an HTML document, use JavaScript.

The answer is #2: "cndy lives cehind ccfe"

The exact CSS sample appears in the spec, linked above, and the example is described as follows (emphasis mine):

The two rules below yield the same result. In the first rule all ‘a’ characters are converted to ‘b’. Subsequently, all ‘b’ characters are converted to ‘c’. In the second rule, all ‘a’ and ‘b’ characters are converted directly to ‘c’.

body { text-replace: "a" "b" "b" "c" }
body { text-replace: "a" "c" "b" "c" }

So the processing order goes:

1. andy lives behind cafe
2. bndy lives behind cbfe
3. cndy lives cehind ccfe

How to use CSS to replace text?

.skills{font-size:0;}
.skills a{font-size:20px;}
.skills a:after {content: ", "; font-size: 20px;}
.skills a:last-child:after {content: ""; } 
.skills:before {
content: 'Class: ';
font-size:20px;
}

<span class="skills">Type：<a href="....../type/aaa/">aaa</a>, <a href="...../type/bbb/">bbb</a></span>