How to add a pseudo-element in jquery

How to add a pseudo-element in jquery

$('.email').blur(function() {
if (!validateEmail($(this).val()) ) {
$(this).removeClass("blur").addClass("focus");
} else {
$(this).removeClass("focus").addClass("blur");
}
})

<input type="email" size="61" class="email"></input>

.focus{border: 1px solid red;outline: none;}
.blur{border: 1px solid #7dc855;outline: none; }

.focus:after{
content: "\00D7";
position: relative;
top: -24px;
left: 500px;
color: red;
}

.blur + label:before{
content: "\2713";
position: relative;
top: -24px;
left: 500px;
color: #7dc855;
}

When my email doesn't validate I want to add the red border from the class focus and an X mark from the pseudo-element before. The code shows the red border but it doesn't show the X mark. How do I add the pseudo-element to my text box?