cssでプレースホルダにアスタリスクを取得する方法

Question

入力のプレースホルダにアスタリスクマークを追加したいとします。このようなもの：

私はインターネットを検索しましたが、有効な解決策が見つかりませんでした。

HTML：

<input type="text" name="your-name" placeholder="Naam"> 

私の現在のアプローチ：

は現在、私は擬似要素の後にそれを追加しようとしていますが、それが表示されません。

input[type=text]::-webkit-input-placeholder:after { 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
} 

input[type=text]:-moz-placeholder:after { /* Firefox 18- */ 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
} 

input[type=text]::-moz-placeholder:after { /* Firefox 19+ */ 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
} 

input[type=text]:-ms-input-placeholder:after { 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
} 

シンボルを直接プレースホルダに追加したくないです。しかし、それ以外の方法でシンボルを違うようにスタイルを変えることができます（私のシンボルは青色、残りはテキストの灰色）。

だから誰でもアスタリスクをプレースホルダに追加できたら助けてください。あなたは、単にプレースホルダー属性自体に*使用していないのはなぜ

JSFIDDLE

Answer 1

？

.asterisk::-webkit-input-placeholder { 
 
    color: #f00; 
 
} 
 
.asterisk:-moz-placeholder { 
 
    color: #f00; 
 
    opacity: 1; 
 
} 
 
.asterisk::-moz-placeholder { 
 
    color: #f00; 
 
    opacity: 1; 
 
} 
 
.asterisk:-ms-input-placeholder { 
 
    color: #f00; 
 
}

<input type="text" name="your_name" placeholder="*" class="asterisk" />

のEndNote：

：あなたはまた、必要な属性を使用して、このようにそれらのスタイルを設定することができますあなたのコメントを1としてあなたは replaced html elements

---

で擬似要素を使用することはできません

<input type="text" name="your_name" placeholder="*" required /> 
[required]::-webkit-input-placeholder { 
    color: #f00; 
} 

あなたの次のコメントの要件は、あなたが以下のようなスパンでアスタリスクを必要とする入力ラップする必要があります。

.input-group{ 
 
    position: relative; 
 
} 
 
.input-group::after{ 
 
    content: '*'; 
 
    position: absolute; 
 
    top: 3px; 
 
    left: 46px; 
 
    color: #f00 
 
}

<span class="input-group"> 
 
    <input type="text" name="your_name" placeholder="Naam" /> 
 
</span>