html - 使用 CSS 选择器在第一个 span 内部标签后冒号

Question

与 ::after CSS pseudo-element我在 <span> 之后添加冒号在 <label>与 .control-label来自 Bootstrap 的类(class):

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

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

但是，当<input>是必需的我必须处理这个标记，带有我无法删除的星号(至少有一段时间我无法修改它):

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

然后我在星号之后也有额外的冒号。我试过:

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

但我得到了意想不到的结果:我只有星号后才有冒号。有没有办法只在标签内的第一个跨度之后才放冒号？我包含了一个涵盖我的问题的片段 - 在此先感谢您的帮助。

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 1

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

这是您需要的选择器。

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>