Question

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

.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>

但问题是它一直把星号放得太偏右了。我希望它紧挨着文本“Status：”和“Issued By：”。我尝试删除float属性，但然后将红色星号放在文本前面。

这是一个显示包括css样式在内的所有内容的jsfiddle。

Answer 1

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

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

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

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

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

Answer 2

嘿，你把星号漂到右边

改为使用

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

您正在使用伪:: before选择器将内容放在元素之前。使用伪:: after将其放在元素之后。

Answer 3

.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>

在所需字段中添加红色星号

3 个答案: