[英]ML - CSS How to align correctly a 'required' asterisk before la form label with the label text?
[英]Adding an asterisk BEFORE the colon on a required form label
我正在尝试制作一个包含一些必填字段的表单,并且我想在标签上为必填输入字段添加一个星号。 我遇到的问题是我找不到一种使星号出现在冒号之前而不是之后的方法。 它需要看起来像这样:
但是现在看起来像这样:
这是我的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: "*"
}
假设您可以修改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>
.firstName span:before { content: "*"; color: red; }
<label class='firstName' for='first-name'> First Name<span>:</span> </label> <input type='text' placeholder='required' />
您可以尝试如下:
.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/>
因为这已经有点滥用样式来生成内容,所以为什么不也将“:”部分作为样式呢?
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
应该有两个冒号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.