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?