Using the CSS content property to update text content across your site

You’ve fully completed the home page for a new website you’re working on, and you’re about ready to copy it dozens of times to flesh out the rest of the pages for your website. Right before you start duplicating that index.html page, you remember that you wanted to add copyright information to the footer.
It is also a bit of a wake up call that you could have remembered to put in the copyright information a month later and would have to, at that point, go into each of these of pages individually to fix the footer.
This tutorial is about a handy little css property that allows you to control the content inside of any given element in your xhtml documents. Since this can be handled in an external css stylesheet document, you’d be able to change the content across all the dependent xhtml files while only having to go to one place.
Prerequisite knowledge:
an intermediate understanding of XHTML and CSS
Say we have a page like this:
An example of a web page with a footer at the bottom
Note: this tutorial assumes you would know how to create a page like this, or any basic webpage for that matter.
The footer has a bit of contact information inside of it, but let’s say we also want to add the copyright information to the footer, next to the email address.
The code for the footer may look like this:

<div id="footer">

The css property we will be using to insert the desired additional text is the “content” property. There are a few quirks to get used to when using this property. For one, the property can only be used in a rule whose selector uses the either the “before” or “after” pseudo-selector. The content that you add using css will be placed within the targeted element, but whether the content will appear before or after the pre-existing content of the targeted element depends on which pseudo-selector you choose.
Since we want the copyright information to appear after the e-mail address, we will use the “after” pseudo-selector. Create an additional rule in your stylesheet as follows:

div#footer p:after

This rule will target only paragraphs within the footer, and place whatever the value of the content property is after the existing content within the paragraph. Let’s create this copyright information with the content property now:

div#footer p:after
  content: " - copyright 2011";

If you look at the page in a browser, you should see that the footer now says “contact: – copyright 2011”. Every page on the website should now have the updated footer, and we didn’t have to lay a finger on any of the xhtml documents.
Success, right? Well let’s say that you wanted to use the copyright character entity instead of the text “copyright.” Naturally, you’d think to replace “copyright” with the &copy; character entity. You can go ahead and try it if you’d like.
What you’d see is that the text “&copy;” appears literally on the webpage. The next thing you might do is remember that each character entity name has an entity number value too, that can be used as a character entity reference as well. You could then look up copyright’s character entity value as 169, and try replacing &copy; with &#169; in that content property value.
Well, this would have worked if we were using &#169; in the xhtml content, but unfortunately, it does not work that way in the css. In order to get these character entities to work, we have to convert the entity decimal value to hexadecimal and use css escape syntax. If you don’t understand what is meant by all that, then no worries, the process is really straightforward.
First, do an internet search for “decimal to hex converter”; there are many of these resources on the web. In fact, you can simply type in “169 decimal to hex” to the bing search engine, and the answer should be at the top of the results, without having to go into any pages.
The hexadecimal equivalent of decimal value 169 is hex value A9.
Note: to differentiate hexadecimal numbers from standard [base ten or decimal] numbers, some resources might use the “0x” notation, e.g., 0xA9 for the hexadecimal value A9.
In order to use this in the css content property value, to prevent literally displaying “A9” we need to use the css “escape” syntax to use it as a character entity. We do this with a backslash.
Replace &copy; (or “copyright” if you didn’t attempt to use the xhtml character entity name) with “\A9 “:

content: " - \A9  2011";

Note: there are two spaces between “\A9” and “2011” and that is because the space following the hexadecimal value is part of the escape syntax. The space prevents ambiguity in situations where the designer wants the character entity to appear next to the content without any space, and the first character of that content just so happens to be a hexadecimal digit (i.e. 0-9 and a-f or A-F). If we wanted “©2011” (that is, no space between © and 2011) then we would use “\A9 2011” instead of “\A92011” because the browser can’t tell you don’t mean \A and 92011, or \A92 and 011, \A920 and 11, and so on.
Well, everything works, but before you leave here to try this on your own project, there are a couple important items to consider.
First, the content property and the :before and :after pseudo-selectors do not work in versions of Internet Explorer before IE8, so if this content you will generate with this css technique is pivotal to the accessibility of your site, then it may be a good idea to hold off until more users have migrated away from those earlier versions of IE.
Second, and somewhat related to the previous concern, is the idea of semantics. Css is meant to be used for presentation and style only. All content and structure is intended to be kept in xhtml. This being said, when we use the content property, it is usually to enhance the page, rather than to add essential content.
Along this same vein, you may have already noticed that you cannot drag-select the text generated with the content property, because as far as the actual document goes, that content does not actually exist– it is merely presentational elements from css, and so it most definitely will not be used in any semantic application, like use in “pagerank” for Google’s search engine, accessibility with screen readers, and so forth.
As long as you are aware of these caveats, then go ahead and find clever uses of this unique and powerful css property.

One Comment

  1. Jason

    I would like to tell you thanks for the very nice explanation of the How to update Text content using CSS In our site… Pls update this type of new content in future.

Leave a Reply

Your email address will not be published. Required fields are marked *