在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中定位僞元素

回答

相關問題