before::pseudo元素跨越网格中的所有列

我有一个两列网格。

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;
}

<main>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>

main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}

左栏为标题，右栏为正文。

是否可以在我的H3标题(显示在左列(上有一个border-top，跨越两列？可能使用before:：伪元素？因此，一条水平线出现在标题上方，并横跨两列。就像试图在横跨两列的每个H3之前插入一个<hr>元素一样。

我有以下内容：

h3::before {
content: "";
position: absolute;
border-top: 1px solid;
width: 100%;
grid-column: 1 / -1;
}

但是边框顶部延伸到包含元素(main(的宽度之外，并接触到浏览器窗口的右侧。Position: relative似乎不起作用。

更新

我试过这个，但黑线只延伸到一列。

h3::before {
content: '';
display: block;
background-color: black;
height: 1px;
width: 100%;
grid-column: 1 / -1;
}

更新2

我想我需要CSS网格将before:：pseudo元素视为实际元素，以便它跨越多个列？这可能吗？根据这个5年前的后伪元素被视为网格中的元素。伪元素的作用就像CSS网格中的网格项，但对我来说不是这样。

一种方法如下，在CSS中有解释性注释：

/* using custom properties to style aspects of the elements in order
to position them appropriately and consistently: */
:root {
--grid-padding-block-start: 0.5em;
--grid-separator-height: 0.2rem;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
/* added spacing between adjacent rows, using the custom property
that also defines the height/block-size of the separator: */
grid-row-gap: var(--grid-separator-height);
/* I chose to use position relative on the <main> element, rather
than the <h3>, in order to have the sizing and position relative
to the grid-container, rather than the grid-item: */
position: relative;
}
main > * {
/* a padding isn't necessary; but if a padding is used (and only
padding-block-start needs to have this property-value) then
using the custom property allows the "separator" pseudo-
element to be appropriately placed in the grid-row-gap spacing: */
padding-block: var(--grid-padding-block-start);
}
h3::before {
content: '';
/* the element size on the inline-axis (left-to-right in latin languages),
100% is relative to the <main> element, not the <h3>, as that's the first
element ancestor with a non-static position: */
inline-size: 100%;
/* sizing the element along the block-axis, and this is why the
grid-column-gap was also given this size: */
block-size: var(--grid-separator-height);
/* adjust to taste: */
background-color: #000;
/* to allow the pseudo-element to be sized in relation to the <main>, in terms
of percentage: */
position: absolute;
/* moving the element zero along the x-axis, and 100% of its own block-axis size
plus the size of the custom property (so that it occupies the grid-row-gap space,
and multiplying that by -1 to ensure that it moves vertically 'up' into that space
rather than further 'into' the <h3> element space: */
translate: 0 calc(-1 * (100% + var(--grid-padding-block-start)));
}

<main>
<h3>Heading One</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading Two</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading Three</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>

JS Fiddle演示。

参考文献：

block-size
calc()
CSS自定义属性
CSS逻辑属性
grid-row-columns
CCD_ 10
CCD_ 11
margin
margin-block
margin-block-start
margin-block-end
CCD_ 16
margin-inline-start
CCD_ 18
padding
CCD_ 20
padding-block-start
CCD_ 22
padding-inline
padding-inline-start
padding-inline-end
CCD_ 26
translate

这可以用一些可能脆弱的CSS来完成，但我建议包装块并在那里设置边界(将块(div？(全部设置为display: grid

main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}
main>p {
margin-top: 2em;
}
h3::before {
content: " ";
height: 3px;
width: 225%;
grid-column: 1 / 2;
display: inline-block;
border-color: #ff0000;
border-style: solid;
border-width: 0;
border-top-width: 0.2em;
}

<main>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>

一行代码可以使用border-image

main {
max-width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
overflow: hidden;
}
h3 {
/* 5px = thickness 
15px = distance from the top
*/
border-image: linear-gradient(180deg,#000 5px,#0000 0) fill 0//15px 100vw;
}

<main>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>

相关内容

最新更新

热门标签：