モデルプロパティの表示名が設定されていますが、必要でない場合はコロンで、コロンと赤のアスタリスクを表示する場合は彼らです。htmlラベル：内容の後にテキストの色が異なる必要があります
コロンをエラーメッセージに表示したくないので、表示名にコロンを追加したくないため、コロンを追加せずに表示することができます。
私はコロンを追加するための私のHTMLファイルに次のスタイルを使用：私はフィールドが必要な場合は、その後表示するには、赤いアスタリスクを取得する方法を見つけ出すことはできませんしかし
.my-label > label:after {
content: ": ";
}
。
別のスタイルクラスを作成してアスタリスクを含めることもできますが、色を変更するとすべて赤色またはすべて黒色になります。実際のモデルプロパティを設定する必要があるかどうかはわかりません。なぜなら、普遍的なルールを必要としているかどうかわからないからです。
これを処理するには、より良い方法をお勧めします。
単一の擬似要素で異なる色を使用することはできません。この場合、:after擬似要素を使用して:*を出力できますが、文字を異なる色にすることはできません。あなたが後にあるものを達成するために
可能な方法の1つは、:before擬似要素を使用することです。優先される問題は、もちろん、labelの先頭にアスタリスクを付けることです。 labelにflexboxモデルを使用させることでこれを修正できます。この溶液に
.my-label > label {
display: inline-flex;
}
.my-label.required > label:before {
color: red;
content: "*";
order: 1;
}
.my-label > label:after {
content: ":";
}<div class="my-label">
<label>Not required</label>
<input type="text" />
</div>
<div class="my-label required">
<label>Required</label>
<input type="text" />
</div>欠点を：これは、あなたがlabelの終わりに:before要素を配置することができ、疑似要素の順序を変更することができるようになりますユーザーがflexboxまたはIE（where a bug stops the flexbox rules being applied to pseudo elements）をサポートしていないブラウザを使用している場合は、アスタリスクがラベルの前に表示されます。
絶対配置を使用することでこれを達成する第二の方法。 labelをposition: relative;に設定すると、:before要素は、末尾にposition: absolute;とright: 0;となるように配置できます。いくつかの権利を正しく追加することで、テキストが重ならないように要素のスペースを "予約"することができます。
.my-label > label {
/*10px is for old browsers which don't support the ch unit*/
padding-right: 10px;
padding-right: 1ch;
position: relative;
}
.my-label.required > label:before {
color: red;
content: "*";
position: absolute;
right: 0;
}
.my-label > label:after {
content: ":";
}<div class="my-label">
<label>Not required</label>
<input type="text" />
</div>
<div class="my-label required">
<label>Required</label>
<input type="text" />
</div>私はこれに似たことをしました。モデルの表示名に使用したLabelForの後にシンプルなラベルを作成しました。そのラベルには赤いアスタリスクが含まれていました。私はそれらの2つをフレックスボックスの中に入れて、うまく働いているようです。ご協力いただきありがとうございます！ – AmandaG
問題ありません。お役に立てて嬉しいです。 –
コメントによると、なぜ:をlabelに追加するのではなく、コンテンツに属しているのですか？
次に、あなたは物事が簡単であるのに、なぜ、複雑color:red
でシンプルな::afterを持つことができます。隠しホッブスによって示唆マークアップを使用
.required::after {
color: red;
content: "*";
}<div>
<label>Not required:</label>
<input type="text" />
<label class="required">Required:</label>
<input type="text" />
</div>、フレキシボックスに代わるものとしては、所望の位置にアスタリスクを配置する相対および絶対位置の組み合わせを使用することができます。
この手法では、使用しているフォントの横と縦の配置を正しく調整する必要があります。
.my-label > label {
display: inline-block;
position: relative;
}
.my-label.required > label {
padding-right: 1em;
}
.my-label.required > label:before {
color: red;
content: "*";
position: absolute;
top: 0.1em;
right: 0.25em;
}
.my-label > label:after {
content: ":";
}<div class="my-label">
<label>Not required</label>
<input type="text" />
</div>
<div class="my-label required">
<label>Required</label>
<input type="text" />
</div>
彼らが必要とされていない場合は、* *とはどういう意味ですか？対応する 'input'に' required'属性がないことを意味しますか？ – Harry
[CSS：コンテンツ2色の前に]重複している可能性があります（http://stackoverflow.com/questions/14288847/css-before-content-two-colors） - 前と後は関係ありません。残念ながら、直接的な解決策はありません。 – CherryDT
あなたも私たちにあなたのHTMLを教えてもらえますか？ –