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

Question

我正在创建一个包含必填字段的表单.为了按要求标记这些,我将一个星号(*)作为一个::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 class="required">
    <input type="text">
  </li>
  <li class="grid required">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </li>
  <li class="required">
    <input type="text">
  </li>
</ul>

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

Answer 1

伪元素被视为网格容器中的子元素(就像在flex容器中一样).因此,它们具有网格项的特征.

您始终可以使用绝对定位从文档流中删除网格项.然后使用CSS脏性能(left,right,top,bottom)移动它们.

这是一个基本的例子:

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 class="required">
    <input type="text">
  </li>
  <li class="grid required">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </li>
  <li class="required">
    <input type="text">
  </li>
</ul>