像个在CSS网格的网格项
问题描述：
我创建了所需的字段的表单伪元素。为了将这些标记为必需，我将一个星号（*）作为::before元素并将其右移，使其位于该字段的右上角。像个在CSS网格的网格项
我遇到的问题是这些字段中的一部分与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/
答
伪元素被认为是在网格容器（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>
伪元件产生相同种类框的实际元件做的。就CSS布局而言，伪元素框和实际元素框是两种。在几乎任何其他情况下，您都会发现伪元素框的行为与实际元素框相同。 – BoltClock