title: How do I cause a pseudo element to span over blank grid cells?
body: <p>I have a Powerpoint-esque layout that I am trying to build in a responsive way using <code>display:grid</code>. I am using pseudo elements <code>:before</code> and <code>:after</code> to draw connecting lines between cells of the grid. This works fine when there cells are adjacent. However, sometimes I want to draw a line between two cells that may be a row or two away. In the attached example, I want the green line to span all the way from #2 to #7.</p>
  
  <p>Is it possible to get the connecting pseudo-element to span the gap in a way that doesn't require hard-coding the height? I may come up with another class (e.g. <code>.double-height:after { height: &lt;whatever the height of a cell plus margins is&gt; }</code> but I'd like to avoid that if possible.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    display: grid;
    grid-template-columns: 45% 10% 45%;
   }
   
  .column-0 { grid-column-start: 1; grid-column-end: 2;}
  .column-1 { grid-column-start: 3; grid-column-end: 4;}
  .row-0 { grid-row-start: 1; grid-row-end: 2;}
  .row-1 { grid-row-start: 2; grid-row-end: 3;}
  .row-2 { grid-row-start: 3; grid-row-end: 4;}
  .row-3 { grid-row-start: 4; grid-row-end: 5;}
  .row-4 { grid-row-start: 5; grid-row-end: 6;}
  .row-5 { grid-row-start: 6; grid-row-end: 7;}
  .row-6 { grid-row-start: 7; grid-row-end: 8;}
  
  .grid &gt; * { 
    padding: 0.25em;
    border: 1px solid #eee;
    margin: 0 0 30px;
    position: relative;
  }
  
  .line-down:after {
    content: '';
    position:absolute; 
    top:calc(100% + 5px);
    height: 20px;
    left:50%; 
    width:4px; 
    margin-left:-2px; 
    background:pink; 
    border-radius:2px; 
  }
  .column-1.row-1:after { background: #00ff00; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="column-1 row-0 line-down"&gt;1&lt;/div&gt;
    &lt;div class="column-1 row-1 line-down"&gt;2&lt;/div&gt;
    &lt;div class="column-0 row-1 line-down"&gt;3&lt;/div&gt;
    &lt;div class="column-0 row-2 line-down"&gt;4&lt;/div&gt;
    &lt;div class="column-0 row-3 line-down"&gt;5&lt;/div&gt;
    &lt;div class="column-0 row-4 line-down"&gt;6&lt;/div&gt;
    &lt;div class="column-1 row-5 line-down"&gt;7&lt;/div&gt;
    &lt;div class="column-0 row-5"&gt;8&lt;/div&gt;
    &lt;div class="column-1 row-6"&gt;9&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>