带有星号的占位符具有不同的颜色

Question

我坚持这个问题 - 我想给一个占位符文本一个不同的颜色和星号标记不同的颜色，我使用下面的代码

CSS

input[type=text] {
    &.required{
        &::-webkit-input-placeholder {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }
        &:-moz-placeholder:after {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }

        &::-moz-placeholder:after {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }

        &:-ms-input-placeholder:after {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }
    }
}

HTML

<input placeholder="Adresse courriel" type="email" id="edit-submitted-adresse-courriel" name="submitted[adresse_courriel]" size="60" class="form-text form-email required">

这仅适用于Chrome，但现在没有进行任何更改，它就停止了工作。

条件：我无法在输入中添加<span>，因为其网络表单无法为占位符添加html标记。

希望得到一些解决方案