Positionner les pseudo-éléments dans la grille CSS

Question

Positionner les pseudo-éléments dans la grille CSS

Demandé el 5 de Septembre, 2017: Quand la question a-t-elle été
583 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de positionner des pseudo-éléments, comme cela devrait être possible selon les spécifications, sur une grille. Cela fonctionne très bien pour ma mise en page extérieure, que j'ai définie sur la balise <body> mais cela ne fonctionne pas pour le <header> qui est elle-même une grille.

Comment puis-je positionner l'en-tête nav:after dans la colonne de droite de la grille ? Pourquoi cela ne fonctionne-t-il pas dans mon exemple ?

J'apprécie toute aide ! Voici le code :

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>

Merci !

Demandé el 5 de Septembre, 2017 par Sebastian

Answer 1

2 Réponses

Answer 2

2voto

kukkuz Points 24428

nav:after est un élément enfant de nav . Alors faites votre nav une grille aussi - elle ne l'est pas pour le moment.

Ou vous pouvez utiliser header:after au lieu de nav:after - voir la démo ci-dessous :

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>

Répondu el 5 de Septembre, 2017 par kukkuz (24428 Points )

Answer 3

0voto

Michael_B Points 15556

Les pseudo-éléments dans un conteneur de grille sont considérés comme des enfants du conteneur. Références :

pseudo-élément agissant comme un élément de grille dans une grille CSS
Les pseudo-éléments rompant le justify-content : space-between dans la disposition flexbox

Par conséquent, à moins qu'un pseudo-élément ne soit positionné de manière absolue, il s'agit d'un élément de la grille. Référence :

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

Voici une démonstration basée sur votre code :

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>

Répondu el 5 de Septembre, 2017 par Michael_B (15556 Points )

Positionner les pseudo-éléments dans la grille CSS

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Positionner les pseudo-éléments dans la grille CSS

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: