Html 带有不同颜色的星号标记的占位符

我被这个问题困住了-我想给一个占位符文本一个不同的颜色和星号标记不同的颜色，我使用以下代码

CSS

HTML

这以前只在chrome上起作用，但现在没有做任何更改，它就停止工作了

条件：我无法在输入中添加

，因为它的Web表单无法为占位符添加html标记

---

希望得到一些解决方案

检查此链接：在最新的Chrome版本中似乎不再有效。谢谢Vincent检查this@nikita你把这个修好了吗？

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

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