在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>

谢谢！

来源

2017-09-05 Sebastian

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>

来源

2017-09-05 10:25:18 kukkuz

你好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; }' '

' – Sebastian

伪元素被认为是容器的孩子。参考文献：

因此，除非一个伪元素绝对定位，它是一个网格项。参考：

https://www.w3.org/TR/css3-grid-layout/#static-position

下面是根据你的代码演示：

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>

来源

2017-09-05 12:05:13

在CSS Grid中定位伪元素

回答

相关问题