JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos modi omnis quibusdam sed a repellat earum in atque, ipsum magnam dolor, quam voluptate veritatis esse. Facere, reprehenderit nostrum natus repudiandae?</p>

JavaScript

let ID = {
	current: 0,
	getNew: function() {
		this.current++;
		return this.current;
	}
};

HTMLElement.prototype.pseudoStyle = function( el, prop, value ) {
	let sheetId = "pseudoStyles",
  		head = document.head || document.getElementsByTagName( "head" )[ 0 ],
  		sheet = document.getElementById( sheetId ) || document.createElement( "style" ),
      className = sheetId + ID.getNew();
  sheet.id = sheetId;
  this.className += ` ${ className }`;
  sheet.innerHTML += `\n.${ className }:${ el }{${ prop }:${ value }}`;
  head.appendChild( sheet );
  return this;
}

void function() {
  document.styleSheets[ 0 ].insertRule(
    `p:before {
      background: red;
      display: block;
      padding: 1rem;
      content: 'HELLO';
      cursor: pointer;
     }`, 0
  );

  setTimeout(() => {
    let p = document.getElementsByTagName( "p" )[ 0 ];
    p.pseudoStyle( "before", "background", "green" )
     .pseudoStyle( "before", "color", "#fff" );
  }, 2000 );
}();