html – 伪元素,就像CSS网格中的网格项一样

概述我正在创建一个包含必填字段的表单.要根据需要标记这些,我将星号(*)作为:: before元素并将其向右浮动,使其位于字段的右上角. 我遇到的问题是这些字段中的一些是使用CSS网格定位的,当我将一个:: before元素添加到网格时,它被视为另一个网格项并将所有内容推送到新的网格行. 为什么CSS网格将:: before元素视为另一个网格项？如何将星号定位为输入元素？ 这是基本的HTML / CS @H_502_0@ @H_502_0@ 我正在创建一个包含必填字段的表单.要根据需要标记这些,我将星号(*)作为:: before元素并将其向右浮动,使其位于字段的右上角.

我遇到的问题是这些字段中的一些是使用CSS网格定位的,当我将一个:: before元素添加到网格时,它被视为另一个网格项并将所有内容推送到新的网格行.

为什么CSS网格将:: before元素视为另一个网格项？如何将星号定位为输入元素？

这是基本的HTML / CSS：

HTML {  wIDth: 75%;}ul {  List-style: none;}input {  wIDth: 100%}.grID {  display: grID;  grID-template-columns: .33fr .33fr .33fr;}li.required::before {  content: '*';  float: right;  Font-size: 15px;}

<ul>  <li >    <input type="text">  </li>  <li >    <p>one</p>    <p>two</p>    <p>three</p>  </li>  <li >    <input type="text">  </li></ul>

这是一个小提琴：https://jsfiddle.net/zbqucvt9/

@R_301_6120@ 伪元素被认为是网格容器中的子元素( just like in a flex container).因此,它们具有网格项的特征.

您始终可以使用绝对定位从文档流中删除网格项.然后使用CSS偏移属性(左,右,上,下)移动它们.

这是一个基本的例子：

HTML {  wIDth: 75%;}ul {  List-style: none;}input {  wIDth: 100%}.grID {  display: grID;  grID-template-columns: 1fr 1fr 1fr;}li {  position: relative;}li.required::after {  content: '*';  Font-size: 15px;  color: red;  position: absolute;  right: -15px;  top: -15px;}

<ul>  <li >    <input type="text">  </li>  <li >    <p>one</p>    <p>two</p>    <p>three</p>  </li>  <li >    <input type="text">  </li></ul>

@H_502_0@ 总结

以上是内存溢出为你收集整理的html – 伪元素,就像CSS网格中的网格项一样全部内容，希望文章能够帮你解决html – 伪元素,就像CSS网格中的网格项一样所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。