Skip to content

Latest commit

 

History

History
51 lines (42 loc) · 1.67 KB

File metadata and controls

51 lines (42 loc) · 1.67 KB

##jQuery cssP - Play with the css of Pseudo Elements jQuery cssP is a lightweight plugin, letting you set and get the css of pseudo elements.

Demo

Check out the DEMO page (or look at index.html).

Known Limitations

  1. In its current form, it only gets the styles which the plugin itself has set.
  2. The plugin doesn't work well with compound selectors (see issue #1).

Usage:

Setter

$('#myThing').cssP({
    before: 'margin-left: 10px;', // String, the ruleset itself (cssP adds selector & braces)
    after: function(){ // or a Function, which returns a ruleset string.
		// For the hell of it, say we want to note the time in a random color (WAT?!)
		var timestamp = 'content: " by the way, it is now ' + new Date().toGMTString() + '";'
		var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
		return timeStamp + 'color: ' + color;
	}
});

Getter

Say you previously did something like:

$('h2').cssP({
    before: 'background: hotpink;',
    after: 'content: "!";'
});

To get it back, you can do either:

$('h2').cssP('before');
// content: "!";

Or add true as a second parameter to get the full stylesheet for this selector:

$('h2').cssP('before', true);
// You'll get both rules back no matter what you wrote as the first parameter:
// h2:before {background: hotpink;}
// h2:after {content: "!";}

Enjoy, contribute and spread the word! — Really Good