Colon after the first litter inside the label with the 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>

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>

Related Articles