Why Is It Impossible to Change Content in CSS

Why is it impossible to change content in css?

The CSS 2.1 spec cited says: “Applies to: :before and :after pseudo-elements”. This restriction has been relaxed in the draft for CSS3 Generated and Replaced Content Module, which is old (2003) and outdated but still partly implemented. Opera seems to support content for normal elements, except for the use of URL values (used to insert images), whereas Chrome and Safari do the same only for URL values. So you code actually works on Safari.

More widespread support is not very likely unless specification work on the module makes some progress. On the W3C CSS module status page, the module is in the “Rewriting” section, with the note “Severely outdated”.

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.

Using pseudo class selectors to change content?

jsFiddle.

---

One way is to use p:hover:before along with the content attribute.

Here's an example:

Html:

<p>
<span>First text!</span>
</p>

CSS:

p:hover span {
  display:none
}
p:hover:before {
  content:"Second text appears instead!";
  color:red;
}

If you'd like to know more about the content property, check out this nice little article.

Is it possible to change html content without using JavaScript?

It completely depends on what action you're wanting to trigger the change on, but in general, yes, this is possible.

Here's an example based on width:

HTML

<div id="something-awesome"></div>

CSS

#something-awesome {
  &:before {
    content: "This is some great text here.";
  }
}

@media (min-width: 500px) {
  #something-awesome {
    &:before {
      content: "This is some other super great text.";
    }
  }
}

Here's a fiddle to show how the example works: https://jsfiddle.net/ttLc7a4t/2/

Change the width of the output box to see it in action.

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}/, '***');

HTML change css content

You can use content: attr(some-attribute) to dynamically change content of :pseudo elements

span:before {  content: attr(data-text);}

<span data-text="Append"> TEXT</span><br/><span data-text="Another"> TEXT</span>

CSS content is not working

The CSS content property can only be used with ::before and ::after pseudo-elements. You could work around this by creating a child element which only has styles on ::after for example, and also includes the content property for the text that is dependent on resolution via media queries.

---

Related Topics