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?

Answer 1

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.