Pneumokok Pneumokok - 4 months ago 20
CSS Question

Colon after first span inside label with CSS selectors

With ::after CSS pseudo-element I add colon after

<span>
in
<label>
with
.control-label
class from Bootstrap:

label.control-label > span::after {
content: ":"
}


<label for="notRequiredInput" class="control-label">
<span>Not required input</span>
</label>


But, when
<input>
is required I have to deal with this markup, with asterisk which I can not remove (at least for a while I can not modify it):

<label for="requiredInput" class="control-label">
<span>Required input</span> <span class="text-danger">*</span>
</label>


And then I have additional colon also after asterisk. I tried:


label.control-label::first-child::after {
content: ":"
}


But I ended up unexpected result: I had colon only after asterisk. Is there a way to put colon only after first span inside label? I include a snippet which covers my problem - thank you in advance for every help.



label.control-label > span::after {
content: ":"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="notRequiredInput" class="control-label">
<span>Not required input</span>
</label>
<input class="form-control" type="text" id="notRequiredInput">
</div>
<div class="form-group">
<label for="requiredInput" class="control-label">
<span>Required input</span> <span class="text-danger">*</span>
</label>
<input class="form-control" type="text" id="requiredInput" required>
</div>




Answer

Is there a way to put colon only after first span inside label?

This is the selector you need.

label.control-label span:first-child::after {
      content: ":"
    }

label.control-label span:first-child::after {
  content: ":"
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="notRequiredInput" class="control-label">
    <span>Not required input</span>
  </label>
  <input class="form-control" type="text" id="notRequiredInput">
</div>
<div class="form-group">
  <label for="requiredInput" class="control-label">
    <span>Required input</span>  <span class="text-danger">*</span>
  </label>
  <input class="form-control" type="text" id="requiredInput" required>
</div>