在所需表格标签上的冒号之前添加一个星号

Question

我正在尝试创建一个包含一些必填字段的表单，并且我想在标签上为必填输入字段添加一个星号。我遇到的问题是我找不到一种使星号出现在冒号之前而不是之后的方法。它需要看起来像这样：

但是现在看起来像这样：

这是我的html：

<li class="form-row">
  <label class="required" for="first-name">First Name:</label>
  <input type="text" placeholder="John" required/>
</li> 

还有我最初尝试解决此问题的CSS：

.required:after {
   content: "*"
 }

Answer 1

假设您可以修改HTML，则只需在冒号周围插入<span>标记，然后使用目标.required span:before：

.required span:before {
  content: "*"
}

<li class="form-row">
  <label class="required" for="first-name">First Name<span>:</span></label>
  <input type="text" placeholder="John" required/>
</li>

Answer 2

.firstName span:before {
  content: "*";
  color: red;
}

<label class='firstName' for='first-name'>
   First Name<span>:</span>
</label>

<input type='text' placeholder='required' />

Answer 3

您可以尝试如下操作：

.required:after {
  content: "* :";
  display:inline-block;
  background:#fff;
  margin-left:-4px;
}

<label class="required" for="first-name">First Name:</label>
<input type="text" placeholder="John" required/>

Answer 4

由于这已经有点滥用样式来产生内容，所以为什么不也将“：”样式化呢？

label::after {
  content: ":";
}

label.required::after {
  content: "*:";
}

<label class="required" for="first-name">First Name</label><br>
<label  for="first-name">Last Name</label>

另外，请注意，::after应该有两个冒号。