在所需表格標簽上的冒號之前添加一個星號

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>標記，然后使用target .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應該有兩個冒號。