Best way to replace a text using CSS

Question

I would like to replace a text say 'company name' in my project. The use-case is to produce documents (after pre-processing) for different companies only by maintaining a different stylesheet for different company.

SEO not much of the importance here.

I am using this approach:

html

<span class="company-name"> YourCompanyName </span>

css

.company-name{font-size: 0}

.company-name:after{
      content: "New Company Name";
      font-size: 14px;
 }

and here is the jsFiddle http://jsfiddle.net/cN9gZ/

so here is my quick question: Is there any better way of doing the same thing, using css only?

Relying on the stylesheet to replace content is generally a bad idea. — Flash, Aug 01 '12 at 06:52
agreed... but i don't want to keep duplicate copy of **content**. It's similar to creating a template, where only style and minor text get changed for different situation. — Saurabh Kumar, Aug 01 '12 at 07:07
I understand that you're using this to create PDF documents, don't care about SEO, etc., which is fine and everything, but why are you asking for a "better" solution when this seems to already do exactly what you want? Are you having a problem? If so, what is the problem? Of course, you'd be better of using a server side solution to change the actual markup for all cases... — Wesley Murch, Aug 01 '12 at 07:08
You might achieve something like that with CSS background images (different stylesheets containing different company logo, for example; something similar to CSS sprites). However, it is really not what CSS is designed for — Evgeny, Aug 01 '12 at 07:09
I'd rather use jQuery or PHP to replace it, but using CSS only that seems like a pretty good way to do it aside from older internet browsers. — Xhynk, Aug 01 '12 at 06:51
yes that's the purpose. I would be pre-processing my html to produce the documents. I'll make this point clear in my question. — Saurabh Kumar, Aug 01 '12 at 06:59

score 6 · Accepted Answer · answered Aug 01 '12 at 07:08

6

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.

answered Aug 01 '12 at 07:08

Jukka K. Korpela

195,524
37
270
390

+1.. ! I really like this idea, it makes more sense.!! but i'll wait for other to respond. – Saurabh Kumar Aug 01 '12 at 07:13
How can I include a new line? Tried
and \n without success. Thanks – Marius Jun 17 '14 at 11:08
1

@MariusAndreiana, that’s a different question, possibly one that has been asked and answered at SO before. But basically you would use `\a` in the content and `white-space: pre-wrap` on the pseudo-element. – Jukka K. Korpela Jun 17 '14 at 11:18

Zeta · Answer 2 · 2012-08-01T07:02:36.620

1

Is there any better way of doing the same thing, using css only?

No. Every other effect would basically result in the same method used: hide the original content and replace it with a pseudo-element (::after or ::before).

Note that search engines are likely to ignore the stylesheet, which could result in some strange search results. It's almost always a better idea to replace fixed content in the markup instead. In almost all cases it will take only a simple find-and-replace. JavaScript and CSS can be deactivated - markup can't.

edited Aug 01 '12 at 07:02

answered Aug 01 '12 at 06:54

Zeta

103,620
13
194
236

+1 for including search engine. but i don't think that's the use case here... the point to produce documents after preprocesing.. like .chm, pdf etc. etc. – Saurabh Kumar Aug 01 '12 at 06:59

score 1 · Answer 3 · answered Aug 01 '12 at 06:56

CSS really isn't designed for this kind of thing. You'd be better off using Javascript, or even better, just altering the HTML code itself.

There really isn't any other way to do what you're asking in CSS other than the way you've done it: The content property isn't available in most CSS styles, because CSS isn't intended for placing content.

Best way to replace a text using CSS

3 Answers3

Linked