Update pseudo element styles dynamically

HTML

<div id="myDiv" onclick="hello()"></div>

CSS

div {background: blue; width: 500px; height: 40px; position: relative;}
div:before {content: ""; position: absolute; top: 0; left: 0; height: 100%; background: red; /* set width: 0; and update it dynamically via script */}

JavaScript

function hello() {
	this.document.getElementById("myDiv").style.color = "purple";
}