CSS Property: Content

Hello my dear readers. With this article I’m starting a series of educational posts related to CSS and web design. The first article is about an item that is somehow between design and content: I am talking about the ‘Content’ CSS property. It’s ambiguity comes from the fact, that CSS is developed to be a means of design, but the ‘content’ property deals with the content. But I’m not going to start a holywar here. We, SEO-professional, think in a different dimension. And the ‘Content’ property for us – is a simple way of adding a text that won’t be indexed by search engines.

First, how it’s used. You need to remember, that the ‘Content’ property can be used only with the following pseudo-elements:

:before

:after

Just a short example:

.my_name:before {content: “Mr. “;}

Use it with this HTML:

<div><span class=”my_name”>Alex Johnson</span></div>

As a result, the browser will show:

Mr. Alex Johnson

Perhaps your question is, which browsers support this trick? Don’t worry, according to the specs, ALL popular browsers work nicely with the ‘Content’ property:

1. Firefox 3+
2. Internet Explorer 8+
3. Chrome 3+
4. Opera 10+
5. Safari 3+

I hope you liked my first article.