当标签具有固定宽度时，如何在标签开始前显示星号

Question

I want to show asterisk sign before my label indicating it is a mandatory field. following is my css id code for label,

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

output of above is, * Label but I want it to be like, *Label Thanks

Answer 1

Use :before pseudo class

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

Or

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

DEMO Updated

Answer 2

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

It will display the asterik.

Edit

The font tag is not supported in HTML5. Use CSS instead.

font link

Answer 3

Without seeing the HTML it is difficult for us to know what is going on. I suspect you will be able to solve your problem using the little-known white-space property, if the asterisk is in the same element as #label. Try using white-space: pre .

Here is some more info: http://www.w3schools.com/cssref/pr_text_white-space.asp