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;
}

Code (markup):

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?

 

\00D7 is the X mark.

 

input can't contain other elements. You have to add some elements to hold the error messages. Hope this helps.

 

Basically, set position: relative; on the input in question, and use a <span> with position: absolute; and position calculated by javascript for finding where exactly you want to place the X - or just put the element outside the input (before or after).

 

Thank you for your help.