CSS网格中扮演网格项目角色的伪元素。

Question

我正在创建一个带有必填字段的表单。为了标记这些字段为必填项，我将星号(*)作为::before元素，并将其向右浮动，使其位于字段的右上角。

我的问题在于，有几个字段是使用CSS网格(positioned with CSS Grids)定位的，而当我向网格添加::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>

Here's a fiddle: https://jsfiddle.net/zbqucvt9/

- Andrea

---

伪元素生成与实际元素相同类型的盒子。就 CSS 布局而言，伪元素盒子和实际元素盒子属于同一种类。你会发现在几乎任何其他情况下，伪元素盒子的行为都与实际元素盒子完全相同。 - BoltClock

Answer 1

伪元素被视为网格容器中的子元素（就像在弹性容器中一样）。因此，它们具有网格项的特性。

您可以始终使用绝对定位将网格项从文档流中移除。然后使用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>

- Michael Benjamin