伪元素在 CSS 网格中充当网格项答案

【问题标题】：pseudo-element acting like a grid item in CSS grid伪元素在 CSS 网格中充当网格项
【发布时间】：2017-08-09 19:39:42
【问题描述】：

我正在创建一个包含必填字段的表单。为了根据需要标记这些，我将星号 (*) 作为 ::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/

【问题讨论】：

伪元素生成与实际元素相同的框。就 CSS 布局而言，伪元素框和实际元素框是两种。在几乎任何其他情况下，您都会发现伪元素框与实际元素框的行为相同。

标签： html css pseudo-element css-grid

【解决方案1】：

伪元素被视为网格容器中的子元素 (just like in a flex container)。因此，它们具有网格项的特性。

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

【讨论】：