在CSS Grid中定位伪元素
问题描述:
我试图根据规范在网格上定位伪元素,这应该是可能的。这适用于我在<body>
上设置的外部布局,但它不适用于本身为网格的<header>
。在CSS Grid中定位伪元素
如何将网格的标题nav:after
定位在网格的右列?为什么它在我的例子中不起作用?
我感谢任何帮助!下面是代码:
body {
display: grid;
grid-template-columns: 1fr 800px 1fr;
}
header {
grid-column: 1/4;
grid-row: 1;
display: grid;
grid-template-columns: 1fr 800px 1fr;
}
/* Works great */
header:before {
content: 'Left';
grid-column: 1/2;
}
/* Doesn't work, treated as a child element */
header nav:after {
content: 'Right';
grid-column: 3/4;
}
header nav {
grid-column: 2/3;
}
<body>
<header>
<nav>
<ul>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</nav>
</header>
</body>
谢谢!
答
nav:after
是子元素的nav
。因此,请将您的nav
也设为一个网格 - 目前不会。
或者你可以使用header:after
代替nav:after
- 见下面的演示:在网格容器
body {
display: grid;
grid-template-columns: 1fr 800px 1fr;
}
header {
grid-column: 1/4;
grid-row: 1;
display: grid;
grid-template-columns: 1fr 800px 1fr;
}
/* Works great */
header:before {
content: 'Left';
grid-column: 1/2;
}
/* CHANGED THIS*/
header:after {
content: 'Right';
grid-column: 3/4;
}
header nav {
grid-column: 2/3;
}
<header>
<nav>
<ul>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</nav>
</header>
答
伪元素被认为是容器的孩子。参考文献:
- pseudo-element acting like a grid item in CSS grid
- Pseudo elements breaking justify-content: space-between in flexbox layout
因此,除非一个伪元素绝对定位,它是一个网格项。参考:
下面是根据你的代码演示:
body {
display: grid;
grid-template-columns: 1fr 300px 1fr;
text-align: center;
border: 1px solid black;
}
body::before {
content: "pseudo - \a left sibling \a of header";
white-space: pre;
grid-column: 1/2;
background-color: salmon;
}
body::after {
content: "pseudo - \a right sibling \a of header";
white-space: pre;
grid-column: 3/4;
background-color: lightgreen;
}
header {
grid-column: 2/3;
background-color: yellow;
padding: 5px;
display: grid;
grid-template-columns: 1fr 100px 1fr;
grid-gap: 5px;
}
header nav {
grid-column: 2/3;
border: 1px dashed red;
}
header::before {
content: "pseudo - \a left sibling \a of nav";
white-space: pre;
grid-column: 1/2;
border: 1px dashed red;
}
header::after {
content: "pseudo - \a right sibling \a of nav";
white-space: pre;
grid-column: 3/4;
border: 1px dashed red;
}
<body>
<header>
<nav>
<ul>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</nav>
</header>
</body>
你好kukkuz,谢谢您的回答!从我在标题示例中可以看到的,header:before元素实际上是body的一个子元素,否则我将无法将它放在左边,对吗? 我想达到相同的效果,我需要ul元素有:before或:after伪元素,但需要将它放在右侧。但是,我看不出这种情况有什么不同?为什么它不以同样的方式工作? – Sebastian
'header:之前'是'header'的孩子...':在'和'之前:'之前'psuedo元素是你应用它的元素的子元素... – kukkuz
如果我错了,请纠正我,但我认为不是。看看下面的简单例子。如果我可以定位:之前在身体的网格上,标题:之前,现在必须是身体的小孩,头部的兄弟姐妹。我认为这也是以下规范所说的:https://developer.mozilla。org/en-US/Firefox/Releases/23#CSS 'body { \t display:grid; \t grid-template-columns:1fr 800px 1fr; } header { \t grid-column:1/4; \t grid-row:1; } header:before { content:'Left'; 网格列:1/2; }' '