CSS Insert Content

On the FanSiter blog I wanted to take advantage of the footer area which, for WordPress and Google Sites alike, is completely off limits to hosted customers.  Luckily for users, and probably a pain for admins, CSS3 allows us to generate and replace content.

A disclaimer before we begin: don’t abuse this for spammy purposes and don’t rely on it for indexing within search engines like Google (it probably isn’t and won’t be for a long time).  This is another, purely-cosmetic modification to your pages.  Which, for the purposes of SEO, is fantastic because you can also reduce redundant content from taking up space, showing up in search engines, etc.  It is relatively easy to detect by service administrators and I have no doubt your banning is imminent if you try to use this to avoid their normal content filters / rules.  WordPress, for example, already automatically removes HTML tags so you can’t use it for links, images, etc. — just text.

.footer_content:before {
content:"Created by Neil C. Obremski • ";
}

That’s all I had to add to my custom CSS in WordPress. What this says is: go inside any tag using the “footer_content” class and insert the content string at the beginning. Let’s see what that does …

CSS3 content doesn't show up in FireBug

It works pretty dang well and it shows up in Chrome (and therefore Safari I’m sure), IE8, and FireFox 3.5; e.g. the modern trifecta.  I didn’t try in older browsers, but if it doesn’t show up then it’s not a big deal.  I wanted to start with something rather mundane and actually I tried linking my name to my website which is when I found out that WP strips out HTML tags.  It’s possible I could find someway around that, but I don’t want to break their trust (and TOS) and lose my blog.

And as noted in the caption, the CSS-generated content does not show up in FireBug, which can provide a bit of mystery to web developers when they’re trying to track down a bug.  This made me think it might be a funny practical joke to play on a designer: use it to insert some rogue content and watch while they freak out trying to figure out where it’s coming from.  In order to hide from file searching functionality, you could use Unicode escaping.