before:: pseudo-element span all columns in grid-CodePudding

I have a two column grid.

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

With headings in the left column and body text in the right column.

Is it possible to have a border-top on my H3 headings (that display in the left column), that span both columns? Possibly using the before:: pseudo-element? So a horizontal line appears above the headings and goes across both columns. Like trying to insert a <hr> element before every H3 that spans both columns.

I've got the following:

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

But the border-top stretches outside the width of the containing element (main) and touches the right hand side of the browser window. Position: relative doesn't seem to work.

UPDATE

I've tried this, but the black line only stretches across one column.

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

UPDATE 2

I guess I need the CSS grid to treat the before:: pseudo-element as an actual element, in order for it to span more than one column? Is that possible? According to this 5 year old post pseudo-elements are treated as an element in grid. pseudo-element acting like a grid item in CSS grid But that isn't the case for me.

CodePudding user response：

This can be done with some likely fragile CSS but I would suggest wrapping the blocks and setting a border there (set blocks (div?) all to 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>

CodePudding user response：

One approach is as follows, with explanatory comments in the 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 demo.

References:

CodePudding user response：

One line of code can do it using 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>