Some of the most-intriguing and useful CSS tools have been around since CSS 2.0, but perhaps are a bit underused. Part of the reason is that IE 7 and below doesn't support many of them. The other part is simply that we forget about them!
Let's take the :before and :after pseudo-elements for example. These are very useful when we need to adjust the display of markup, without manually adding tons of symbols and prefixes to our HTML.
But, the other long-forgotten reason for using :before and :after is that it maintains the selectability of content for copy/paste operations.
Using a table of cost data for example:
| Part 1 | 199.99 |
| Part 2 | 299.99 |
| Part 3 | 399.99 |
By applying the following CSS:
table td + td:before { content: '$'; }
We suddenly have:
Which maintains our existing markup, while allowing the user to copy/paste the values without the dollar signs.
As IE7 and lower browsers can't make use of :before, a backup jQuery snippet can help:
if($.browser.msie && $.browser.version <= 7)$('table td + td').each(function() { $(this).html('$' + $(this).html()); });