How to Use CSS to Replace or Change Text

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.

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;
  }

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

CSS - Change Element tag and replace its content

Your best option for this situation is to style the class as an h3, overriding the h1 styling. As long as the styling for this class is below the styling for h1, it should take precedence.

You'll also need to hide the original content because content doesn't replace content.

For example:

h3 {

        font-size:2em;

        color:#424242;

    }

    .class {

        visibility: hidden;

    }

    .class::after {

        content: 'Replacement Text';

        visibility: visible;

        font-size:2em;

        color:#424242;

    }

<h3 class="class">text</h3>

Using CSS to replace text dynamically

Your CSS is incorrect, the h4 is not a child of the span it's a sibling so use +, like so

ul {
  list-style: none;
}

li#onroad span.ui-state-active+h4 {
  visibility: hidden;
}

li#onroad span.ui-state-active+h4:before {
  visibility: visible;
  content: "Complete";
}

<ul>
  <li id="onroad" class="onroad boxSizing" data-stageid="4" data-invalidot="1" data-desc="Heading your way">
    <span class="material-icons ui-state-default ui-state-active" aria-hidden="true"></span>
    <h4 class="text" role="none">On Road</h4>
    <span class="line ui-state-default ui-state-active" aria-hidden="true"></span>
</ul>

---

Related Topics