Simulating :before and :after with jQuery

Neat little trick for IE6 and 7. IE8 and real breowsers do understand the CSS-pseudoelements :before and :after.

HTML

<div id="page">

<a name="top" id="top"></a>

<!-- header -->
<header><div class="centerSite">

			<!-- top menu: dwb -->
	<nav role="navigation" class="dwb"><ul>
		<li class="home"><a href="/" accesskey="h"><span>David Walsh Blog</span></a></li>
		<li class="articles">
			<a href="/page/1" accesskey="a">articles</a>
			<div class="dropdown">
				<ul>
					<li><a href="/page/1">Latest Posts</a></li>
					<li><a href="/tutorials/features">Features</a></li>
					<li><a href="/tutorials/tips">Quick Tips</a></li>
					<li><a href="/s" rel="nofollow">Script &amp; Style</a></li>
					<li class="sep"></li>
					<li><a href="/tutorials/html5">HTML5</a></li>
					<li><a href="/tutorials/css/animations">CSS Animations</a></li>
					<li><a href="/tutorials/firefoxos">Firefox OS</a></li>
					<li><a href="/tutorials/jquery">jQuery</a></li>
					<li><a href="/tutorials/mootools">MooTools</a></li>
					<li><a href="/tutorials/php">PHP</a></li>
					<li class="sep"></li>
					<li><a href="/guest-post">Submit Guest Post</a></li>
				</ul>
			</div>
		</li>
		<li class="demos">
			<a href="/demos" accesskey="d">demos</a>
			<div class="dropdown">
				<ul>
					<li><a href="/demos">All Demos</a></li>
					<li><a href="/demos/jquery">jQuery Demos</a></li>
					<li><a href="/demos/mootools">MooTools Demos</a></li>
					<li><a href="/demos/css">CSS Demos</a></li>
					<li><a href="/demos/html5">HTML5 Demos</a></li>
				</ul>
			</div>
		</li>
		<li class="connect">
			<a href="/forums" accesskey="c">forums</a>
			<div class="dropdown">
				<ul>
					<li><a href="/forums/forum/mootools">MooTools 1.x</a></li>
					<li><a href="/forums/forum/mootools-2">MooTools 2</a></li>
					<li><a href="/forums/forum/css">CSS</a></li>
					<li><a href="/forums/forum/html5-mobile">HTML5 &amp; Mobile</a></li>
					<li><a href="/forums/forum/jquery">jQuery</a></li>
					<li><a href="/forums/forum/firefox-os">Firefox OS</a></li>
				</ul>
			</div>
		</li>
		<li class="discounts"><a...

CSS

nav .search {
		display: none;
	}

	.demoFrame header,
	.demoFrame .footer,
	.demoFrame h1,
	.demoFrame .p {
		display: none !important;
	}

	h1 {
		font-size: 2.6em;
	}

	h2, h3 {
		font-size: 1.7em;
	}

	.left {
		width: 920px !important;
		padding-bottom: 40px;
		min-height: auto !important;
		padding-right: 0;
		float: left;
	}

	div.p {
		font-size: .8em;
		font-family: arial;
		margin-top: -20px;
		font-style: italic;
		padding: 10px 0;
	}

	.footer {
		padding: 20px;
		margin: 20px 0 0 0;
		background: #f8f8f8;
		font-weight: bold;
		font-family: arial;
		border-top: 1px solid #ccc;
	}

	.left > p:first-of-type { 
		background: #ffd987; 
		font-style: italic; 
		padding: 5px 10px; 
		margin-bottom: 40px;
	}

	.demoAds {
		position: absolute;
		top: 0;
		right: 0;
		width: 270px;
		padding: 10px 0 0 10px;
		background: #f8f8f8;
	}
	.demoAds a {
		margin: 0 10px 10px 0 !important;
		display: inline-block !important;
	}

	#promoNode { 
		margin: 20px 0; 
	}

	@media only screen and (max-width : 1024px) {
		.left {
			float: none;
		}

		body .one .bsa_it_ad {
			position: relative !important;
		}
	}

div#up {
			width:0px; 
			height:0px; 
			border-left:5px solid transparent;  /* left arrow slant */
			border-right:5px solid transparent; /* right arrow slant */
			border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
		}
		div#down {
			width:0px; 
			height:0px; 
			border-left:20px solid transparent;  /* left arrow slant */
			border-right:20px solid transparent; /* right arrow slant */
			border-top:20px solid #f00; /* top, add background color here */
		}
		div#right {
			width:0px; 
			height:0px; 
			border-top:60px solid transparent;  /* left arrow slant */
			border-bottom:60px solid transparent; /* right arrow slant */
			border-left:60px solid green; /* top, add background color here */
		}
		div#left {
			width:0px; 
			height:0px; 
			border-top:10px solid transparent;  /* left arrow slant */
			border-bottom:10px solid...