Google Plus Icon in CSS Using a Single Empty Div

I was inspired by the idea that you can make a wide range of shapes using only CSS on a single div after reading this css-trics.com page. A few days ago I created a Facebook Icon using a single empty div. Today I created the Google Plus Icon using a single empty div:




#gplus:before {
content: "g";
position: absolue;
font: 58px/29px "Palatino Linotype", Georgia, "Book Antiqua", serif;
color: #fff;
padding-left: 27px;
top: 0;
left: 0;
}
#gplus {
position: relative;
border-top: 12px solid #D64335; /* red */
height: 60px;
width: 100px;
background-color: #393838; /* dark gray */
}
#gplus:after {
content: "+";
border-left: 25px solid #426AAD; /* blue */
background-color: #32A45E; /* green */
border-right: 25px solid #F8CA32; /* yellow */
height: 12px;
width: 15px;
padding-left: 10px;
font: 44px/55px "Palatino Linotype", Georgia, "Book Antiqua", serif;
position: absolute;
color: #fff;
top: -12px;
left: 25px;
}

The font is not exact but it is close. It works in Firefox 5, Chrome 13, and Safari 5.1. See the JS Fiddle version.