Hello,
Am new in CSS

I have form like below code.

<div>
    <span class="lable"> Practice Name<span class="PreRequired">*</span></span> 
        <input type="text" name="practiceName" ng-model="practiceData.practiceName" style="width:20.5%;" required  ng-pattern="/^([a-zA-Z]+\s*)*[a-zA-Z]+$/" placeholder="Practice Name"/>
    <span ng-show="SubmitPractice.practiceName.$error.pattern">
         Please enter valid Practice Name
    </span>
</div>
<div>
    <span class="lable"> Practice Head<span class="PreRequired">*</span></span> 
    <select ng-model="practiceData.practiceHead" style="width:20.5%;" required="required" ng-options="em.gslab_id as em.employee_name for em in userrole" >
        <option style="display:none" value="">Select Practice Head</option>
    </select>
    <span style='color:red' ng-show="practiceData.practiceHead===''  && (practiceData.practiceExecs+'').length>0">
     Please select Practice Head 
    </span>
</div>

In above, I have class="lable". I have applied CSS to that class like aligning and other needed things.I have used this class in lable.
I have another class="required".which I have used for input,select which marks red outline for input area.

I want to add * character after my lable (in above casees lables like Practice Name,Practice Head) , which I am doing by addng it explicitly using <span class="PreRequired">*</span>

Is it possible using CSS, that * get added to lable span as I use required class to any div?

You can use this:

.label:after {
   content: '*';
}

You can add colors and stuff into that class as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.