伪元素就像 CSS 网格中的网格项
pseudo-element acting like a grid item in CSS grid
我正在创建一个包含必填字段的表单。为了根据需要标记这些,我将星号 (*) 作为 ::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>
这里是 fiddle:https://jsfiddle.net/zbqucvt9/
伪元素被视为网格容器中的子元素 ()。因此,它们具有网格项的特征。
您始终可以使用绝对定位从文档流中删除网格项。然后使用 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>
我正在创建一个包含必填字段的表单。为了根据需要标记这些,我将星号 (*) 作为 ::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>
这里是 fiddle:https://jsfiddle.net/zbqucvt9/
伪元素被视为网格容器中的子元素 (
您始终可以使用绝对定位从文档流中删除网格项。然后使用 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>