我正在尝试根据规范在网格上定位伪元素。这适用于我在<body>
上设置的外部布局,但它不适用于<header>
,它本身就是一个网格。
如何将标题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>
谢谢!
答案 0 :(得分:2)
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>
答案 1 :(得分:0)
网格容器中的伪元素被视为容器的子元素。参考文献:
因此,除非绝对定位伪元素,否则它是网格项。参考:
以下是基于您的代码的演示:
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>