Cacher is the code snippet organizer for pro developers

var UID = {
	_current: 0,
	getNew: function(){
		this._current++;
		return this._current;
	}
};

HTMLElement.prototype.pseudoStyle = function(element,prop,value){
	var _this = this;
	var _sheetId = "pseudoStyles";
	var _head = document.head || document.getElementsByTagName('head')[0];
	var _sheet = document.getElementById(_sheetId) || document.createElement('style');
	_sheet.id = _sheetId;
	var className = "pseudoStyle" + UID.getNew();
	
	_this.className +=  " "+className; 
	
	_sheet.innerHTML += " ."+className+":"+element+"{"+prop+":"+value+"}";
	_head.appendChild(_sheet);
	return this;
};

//Example 1: Modify
//Say we have these styles:
.test:before		{
	content: "testing";
	color: red;
}

//And this HTML:
<div id="testDiv" class="test">test2</div>

//In this example, we have an element which already has a :before with styles set. Here is how we would modify them:
var div = document.getElementById("testDiv");
div.pseudoStyle("before","color","purple");


//Example 2: Set
//Say we have an element with NO :before styles currently set:

<div id="testDiv">test2</div>

//Here’s how we would set some :before styles:

var div = document.getElementById("testDiv");
div.pseudoStyle("before","content","'test'");
div.pseudoStyle("before","color","purple");

//OR we can chain methods:

var div = document.getElementById("testDiv");
div.pseudoStyle("before","content","'test'").pseudoStyle("before","color","purple");