在 CSS Grid 中定位伪元素答案

【问题标题】：Position pseudo elements in CSS Grid在 CSS Grid 中定位伪元素
【发布时间】：2017-09-05 10:17:55
【问题描述】：

我正在尝试根据规范将伪元素放置在网格上。这适用于我在<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>

谢谢！

【问题讨论】：

标签： html css css-grid

【解决方案1】：

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>

【讨论】：

你好kukkuz，谢谢你的回答！从我在标题示例中看到的内容来看，标题：之前元素实际上是主体的子元素，否则我将无法将其定位在左侧，对吗？我正在尝试实现相同的目标，我需要 ul 元素具有 :before 或 :after 伪元素，但需要将其定位在右侧。但是，我看不出这种情况有什么不同？为什么它的工作方式不一样？
header: before 是 header 的子元素... :after 和 :before 伪元素是您应用它的元素的子元素...
如果我错了请纠正我，但我认为不是。请看下面的简化示例。如果我可以将 :before 定位在 body 的网格上，header:before 现在必须是 body 的子级，header 的兄弟级。我认为这也是以下规范所说的：developer.mozilla.org/en-US/Firefox/Releases/23#CSSbody { display: grid; grid-template-columns: 1fr 800px 1fr; } header { grid-column: 1 / 4; grid-row: 1; } header:before { content: 'Left'; grid-column: 1 / 2; }<body> <header> </header> </body>
我的问题是，为什么它对导航的工作方式相同？
@Sebastian，不幸的是，你的猜测是错误的。您可以证明，如果您尝试将header 和header:before 放入body 网格的不同行中。您的示例 看起来像 header 和 header:before 都共享相同的 body 的网格区域，因为 header:before 是 header 的 content 的一部分.您可以使用 Firefox Devtools 中的 Grid Inspector 工具查看它。您链接的文档不是规范，它是旧 Firefox 版本的发行说明，它没有说明任何关于网格的内容。其实:beforeis the child of the element.

【解决方案2】：

网格容器中的伪元素被视为容器的子元素。参考资料：

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

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>

【讨论】：