ラベルが固定幅のときにラベル開始前にアスタリスク記号を表示する方法

ラベルの前にアスタリスク記号を表示して、それが必須フィールドであることを示したいとします。次のラベルのための私のcss IDコードで、上記のラベルが固定幅のときにラベル開始前にアスタリスク記号を表示する方法

#label{ 
    float: left; 
    height: 30px; 
    padding-right: 4px; 
    padding-top: 2px; 
    position: relative; 
    text-align: right; 
    vertical-align: middle; 
    width: 73px; 
}

出力は、 *ラベルですが、私はそれが *ラベルのようなものおかげ

出典

2012-10-31 Prasad

ポストHTMLコード –

利用：擬似クラス

 .label:before{ 
    content:"*" ; 
    color:red 
    }

それとも

#req:before{ 
    content:"*" ; 
    color:red  
    }

DEMO Updated

出典

2012-10-31 08:36:39 Sowmya

感謝を参照してくださいしかし、私はこのアスタリスクを追加したい場合にのみ、選択したラベルが

txt

– Prasad

が更新答え – Sowmya

をチェックすなわち私はちょうど '：before'が擬似クラスではなくCSS2の擬似要素であることを付け加えたいと思います。また、2017年のように、CSS3では擬似要素と疑似クラスを区別するために二重コロンが追加されています。これはCSS3の ':: before'であることを意味します。：o） – agrm

になりたいHTMLを見ることなく、それがために困難です私たちは何が起こっているか知っている。アスタリスクが#labelと同じ要素にある場合は、ほとんど知られていないwhite-spaceプロパティを使用して問題を解決できると思われます。 white-space: preを試してみてください。 http://www.w3schools.com/cssref/pr_text_white-space.asp

出典

2012-10-31 08:15:36

をお勧めします決してw3schools.com http://w3fools.com/ – freebird

Simple approach is like this 
<font color="red">*</font>UserName<input type="text" name="userID"/> 

It will display the asterik.

0の前にここで

は、いくつかの詳細情報です

編集

フォントタグは、HTML5ではサポートされていません。代わりにCSSを使用してください。

font link

出典

2013-11-30 05:25:28

廃止されました。もうフォントを使用しないでください。 –

@MohamadZeinありがとうございました。HTML5ではサポートされていません。 –

ラベルが固定幅のときにラベル開始前にアスタリスク記号を表示する方法

答えて

関連する問題