Vorher :: Pseudo-Element erstrecken sich alle Spalten im Netz ⇐ CSS

[Anonymous]

Ich habe ein Zweispaltenraster.

Code: Select all

main {
max-width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}

h3::before {
content: '';
display: block;
background-color: black;
height: 1px;
grid-column: 1 / span 2;
}< /code>

Heading blah
Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.
Heading blah
Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.
Heading blah
Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.
< /code>
< /div>
< /div>
< /p>
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}

mit Überschriften in der linken Spalte und des Körpertextes in der rechten Spalte. Möglicherweise verwenden Sie das vor :: Pseudo-Element? So erscheint also eine horizontale Linie über den Überschriften und geht über beide Säulen hinweg. Wie beim Versuch, ein Element vor jedem H3 einzufügen, das beide Spalten umfasst.

Code: Select all

h3::before {
content: "";
position: absolute;
border-top: 1px solid;
width: 100%;
grid-column: 1 / -1;
}
< /code>
Aber der Grenztop erstreckt sich außerhalb der Breite des enthaltenden Elements (Element (main

) und berührt die rechte Seite des Browserfensters. Position: Relative scheint nicht zu funktionieren.h3::before {
content: '';
display: block;
background-color: black;
height: 1px;
width: 100%;
grid-column: 1 / -1;
}
< /code>
Aktualisieren Sie 2 < /p>
Ich denke, ich brauche das CSS-Raster, um das vor :: Pseudo-Element als tatsächliches Element zu behandeln, damit es mehr als eine Spalte umfasst? Ist das möglich? Nach diesem 5-jährigen Post-Pseudo-Elemente werden im Netz als Element behandelt. Pseudo-Element, das sich wie ein Gitterartikel in CSS-Raster verändert, aber das ist für mich nicht der Fall.