在向div添加类后不更新

Question

我有一些div，只要输入是有效的，它就应该在div中添加一个绿色的勾号，如下所示：

​

function ValidateEmail() {
    var regex = /(([a-zA-Z0-9._%+-]+@([a-zA-Z0-9-]+\.?){1,3})(\.[a-zA-Z]{2,6}){1,3})/
    var email = document.getElementById("reg_email").value;
    if (email.indexOf("..") == -1 && email.match(regex)) {
        reg_email_v.classList.add('validated');
        return true;
    }
    reg_email_v.classList.remove('validated');
    reg_email_v.innerHTML = "";
    return false;
}

.input-validation 
{
    display: inline-block;
    color:Green;
    content:"";
}
.input-validation.validated
{
    content: "123";
    color: Green;
}

<input type="text" id="reg_email" runat="server" maxlength="100" onkeyup="ValidateEmail();" />
<div class="input-validation" id="reg_email_v"></div>

​

当我将validated添加到div的类中时，它会在浏览器本身中更新，但是在实际的div中什么都不会显示。div和input都在表中的一个td中。

Answer 1

content只能与:after和:before伪类一起使用。所以

.input-validation.validated:before
{
    content: "123";
    color: Green;
}

应起作用