I am currently working on positioning pseudo-elements on a grid, following the specification. It seems to be working well for my overall layout set on the <body>, however, I am facing difficulties when it comes to the <header> element which is also a grid.
How can I place the header's nav:after element in the right column of the grid? What could be causing this issue in my specific case?
Your assistance is greatly appreciated! Below is the code snippet:
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;
}
/* Working fine */
header:before {
content: 'Left';
grid-column: 1 / 2;
}
/* Not functioning as expected, 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> Many thanks!