将红色星号添加到必填字段

我想为我的必填字段添加红色星号。到目前为止，我已经使用这个尝试：将红色星号添加到必填字段

.required-field::before { 
 
    content: "*"; 
 
    color: red; 
 
    float: right; 
 
}

<form id="nonUsSafety" method="post"> 
 
    <div class="divTable"> 
 
    <div class="divTableBody"> 
 
     <div class="divTableRow"> 
 
     <div class="divTableCell required-field">Status:</div> 
 
     <div class="divTableCell"><input type="text" id="statusNonUs" value="${statusNonUs}"></div> 
 
     </div> 
 
     <div class="divTableRow"> 
 
     <div class="divTableCell required-field">Issued By:</div> 
 
     <div class="divTableCell"><input type="text" id="issuedBy" value="${issuedBy}"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

但问题是，它使把星号太远权。我希望它在文本“状态：”和“颁发者：”旁边。我尝试删除浮动属性，但它然后将红色星号放在文本的前面。

这是一个jsfiddle，它显示包括CSS样式的所有内容。

谢谢，任何帮助表示赞赏。

来源

2017-08-07 Alec

而不是::before使用::after并删除float: right。

::before在您选择的元素之前放置一个伪元素。 ::after将把它放在后面，所以不要把星号放在你想要的元素之前，而是用一个浮点/位置移动它，你可以自然地放置它。

星号向右移动太远的原因是因为浮动会将元素移动到父容器的右侧（并非总是父元素，请告诉我是否需要我详细说明）。因此，通过向右移动，您告诉它移动到标签容器的最右侧，这意味着仅位于文本框的左侧，而不是位于标签文本的右侧。

https://jsfiddle.net/h4depmdf/1/

.required-field::after { 
    content: "*"; 
    color: red; 
}

来源

2017-08-07 15:43:34 Don

嘿，你是浮动的星号向右

.required-field::after { 
    content: "*"; 
    color: red; 
    margin-left:2px 
}

您正在使用伪选择它放置元素之前的内容之前

改用::。使用pseudo :: after将它放在元素后面。

来源

2017-08-07 15:44:47

-1

.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" value="${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" value="${issuedBy}"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </form> 
 
</html>

来源

2017-08-07 16:03:01 Anil

张贴代码本身并不能作出一个很好的答案。添加一些单词来解释您所做的更改以及原因。 – Don

将红色星号添加到必填字段

回答

相关问题