向必填字段添加红色星号
我想为我的必填字段添加一个红色星号。到目前为止，我已经尝试过这样做：
.required-field::before {
content: "*";
color: red;
float: right;
}<div class="required-field">Issued By:</div>
<input type="text" id="issuedBy">
但问题是，它总是把星号放得太对了。我希望它就在文本"Status:“和"Issued By:”的旁边。我尝试删除了float属性，但它随后将红色星号放在文本前面。
回答 3
Stack Overflow用户
发布于 2017-08-07 23:43:34
不使用::before，而是使用::after并删除float: right。
::before会在您选择的元素之前放置一个伪元素。::after会把它放在后面，所以不是把星号放在你想要的元素之前，然后用一个浮动/位置移动它，你可以把它放在naturally之后。
星号向右移动太多的原因是因为浮动会将元素移动到父容器的右侧(不一定是父元素，如果需要详细说明，请告诉我)。因此，通过向右浮动，您告诉它移动到标签容器的最右侧，这意味着只移动到文本框的左侧，而不是标签文本的右侧。
https://jsfiddle.net/h4depmdf/1/
.required-field::after {
content: "*";
color: red;
}Stack Overflow用户
发布于 2017-08-07 23:44:48
嘿，你把星号放在右边了
相反，请使用
.required-field::after {
content: "*";
color: red;
margin-left:2px
}您正在使用伪::before选择器，该选择器将内容放在元素之前。使用pseudo ::after将其放在元素之后。
Stack Overflow用户
发布于 2017-08-08 00:03:02
.required-field::before {
content: "*";
color: red;
}<html>
<form id="nonUsSafety" method="post">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Status:<span class="required-field"></span></div>
<div class="divTableCell"><input type="text" id="statusNonUs"></div>
</div>
<div class="divTableRow">
<div class="divTableCell">Issued By:<span class="required-field"></span></div>
<div class="divTableCell"><input type="text" id="issuedBy"></div>
</div>
</div>
</div>
</form>
</html>
https://stackoverflow.com/questions/45550837
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号