html - 在所需表格标签的冒号前添加星号

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>