带有：after选择器的Javascript addClass

Question

I am using addClass to validate my form. This is my javascript:-

if (name.val()=='') {
    name.addClass('highlight');
    return false;
} else name.removeClass('highlight');

and the css with the class I am adding is this :-

#coverup .highlight {
    border: 1px solid #a94442;
}

And this script above both works and is okay, however I want to add a glyphicon to the textfield as well as change the border colour, so that the error becomes more prominent to the user.

I then decided to simply change the code by doing another addClass method as shown below:-

if (name.val()=='') {
    name.addClass('highlight');
    name.addClass('highlight:after');
    return false;
} else name.removeClass('highlight'); name.removeClass('highlight:after');

and Then changed my CSS to this :-

#coverup .highlight {
    border: 1px solid #a94442;
}
#coverup .highlight:after {
    content:"\2715";
    color: red;
}

However doing this hasn't solved my issue, can anybody give me some options or guidance as to how I can simply add a glyphicon to the end of my text field if it isn't filled in as well as making the border change colour too.

Thanks!

Answer 1

• <input /> elements cannot have child nodes.
• ::before and ::after psuedo-elements are treated as a child inserted before the first, and after the last "real" child respectively.

The above two facts considered, you cannot apply ::before or ::after to <input /> elements.