在必填字段中添加红色星号 [英] Adding a red asterisk to required fields

问题描述

我想为必填字段添加一个红色星号.到目前为止，我已经尝试使用此功能:

I am wanting to add a red asterisk for my required fields. So far I have tried using this:

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

<div class="required-field">Issued By:</div>
<input type="text" id="issuedBy">

但是问题在于，它总是使星号过于偏右.我希望它就在文本状态:"旁边.和发行人:".我尝试删除了float属性，但随后将红色星号放在了文本的前面.

But the problem is it keeps putting the asterisk too far right. I want it to be right next to the text "Status:" and "Issued By:". I tried removing the float attribute, but it then places the red asterisk in front of the text.

推荐答案

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

:: before 在您选择的元素之前放置一个伪元素. :: after 会将其放置在其后，因此，与其将星号放置在所需元素之前并以浮点/位置移动它，不如将其自然地放置在其后.

::before places a pseudoelement before the element you're selecting. ::after will place it after, so rather than putting the asterisk before the element you want and moving it with a float/position you can just place it after naturally.

将星号移到最右边的原因是因为float将元素移到父容器的右侧(不总是父元素，请让我知道是否要详细说明).因此，通过向右浮动，您可以告诉它移动到标签容器的最右边，这意味着仅在文本框的左侧，而不是在标签文本的右侧.

The reason the asterisk was moved too far to the right is because floating moves the element to the right side of the parent container (not always the parent element, let me know if you want me to elaborate). So by floating right you were telling it to move to the far right of the label container which means just to the left of the text boxes, and not to the right of the label text.

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

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

这篇关于在必填字段中添加红色星号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！