英文:
CSS positioning question. Please asterisk inside a display block element
问题
我正在使用的CMS生成的表单代码如下：
<div class="sf-fieldWrp">
<label for="Textbox-3">联系人姓名</label>
<input type="text" value="" required="required">
<p>请填写您的全名</p>
</div>
现在，我想在必填字段的标签旁边放置一个星号。代码中唯一的必填字段标识是 required="required"，不幸的是没有类和ID，只有必填属性。
是否可能在字段的标签之后正确地显示星号，例如在联系人姓名之后？
我尝试了这段CSS代码，它有点起作用，但它将星号放在标签之前，而且标签本身是一个块元素，但如果需要的话我可以更改它。
label { display: block }
.sf-fieldWrp { position: relative }
input[required="required"] + p::before {
content: "*";
color: red;
position: absolute;
top: 0;
left: 0;
font-size: 1.1rem;
font-style: normal;
}
如您所见，星号显示在标签之前，但我希望它显示在标签文本之后（不是在标签块元素之后）。
我如何保持标签和输入在两行，并在标签文本之后放置星号？
英文:
The CMS I am using is generating a code like this for forms:
<div class="sf-fieldWrp">
<label for="Textbox-3">Contact Name</label>
<input type="text" value="" required="required">
<p>Your full name please</p>
</div>
Now, I would like to place an asterisk next to the label of the fields that are required. The only identifier for required fields in the code is required="required", unfortunately no classes and no ids, only the required attribute.
Is it possible to place the asterisk right after the label of the field, in this case after Contact Name?
I tired this CSS code and it kinda works but it places the asterisk before the label and the label itself is a block element but I can change that if needed.
label { display: block }
.sf-fieldWrp { position: relative }
input[required="required"] + p::before {
content: "*";
color: red;
position: absolute;
top: 0;
left: 0;
font-size: 1.1rem;
font-style: normal;
}
As you can see the asterisk shows before the label but I want it to show after the label text (not after the label block element).
How do I keep the label and input in two separate lines and place the asterisk after the label text?
答案1
得分: 1
你可以在父级上使用:has并在标签后面添加星号。
英文:
You would be able to use the :has on the parent and add the asterisk using
after in the label
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.sf-fieldWrp:has(input[required="required"]) label::after {
content: '*';
display: inline-block;
color: red;
}
<!-- language: lang-html -->
<div class="sf-fieldWrp">
<label for="Textbox-3">Contact Name</label>
<input type="text" value="" required="required">
<p>Your full name please</p>
</div>
<!-- end snippet -->
答案2
得分: 0
尝试这个：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: null -->
<!-- 语言: lang-css -->
label { display: block }
.sf-fieldWrp { position: relative }
label::after {
content: "*";
color: red;
font-size: 1.1rem;
font-style: normal;
}
<!-- 语言: lang-html -->
<div class="sf-fieldWrp">
<label for="Textbox-3">联系人姓名</label>
<input type="text" value="" required="required">
<p>请填写您的全名</p>
</div>
<!-- 结束代码片段 -->
英文:
Try this:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
label { display: block }
.sf-fieldWrp { position: relative }
label::after {
content: "*";
color: red;
font-size: 1.1rem;
font-style: normal;
}
<!-- language: lang-html -->
<div class="sf-fieldWrp">
<label for="Textbox-3">Contact Name</label>
<input type="text" value="" required="required">
<p>Your full name please</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论