title: How to align the pseudo element to the bottom
body: <p>I am trying to create an shadow effect when mouseover on the table row.
  I am using the pseudo class :after to create the shadow effect on the bottom of the  table row. I am able to get the shadow effect, but I want to align the pseudo element to the bottom of the row hovered, right now the shadow is appearing on the top of the row and its not taking the exact width of the row, its taking the full width of the screen.</p>
  
  <p>How can I resolve this?</p>
  
  <p>Here is what I have done.</p>
  
  <p>Code:</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>.highlight {
    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, .5)!important;
    background: none;
  }
  
  table {
    border-collapse: collapse !important;
  }
  
  table td {
    padding: 10px
  }
  
  table tr:hover::after {
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
    content: "";
    height: 1px;
    left: 15px;
    position: absolute;
    width: 100%;
    z-index: 1 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;table border="1px"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td bgcolor="grey"&gt;Header1&lt;/td&gt;
        &lt;td bgcolor="grey"&gt;Header2&lt;/td&gt;
        &lt;td bgcolor="grey"&gt;Header3&lt;/td&gt;
        &lt;td bgcolor="grey"&gt;Header4&lt;/td&gt;
        &lt;td bgcolor="grey"&gt;Header5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td bgcolor="grey" class="myCell"&gt;Row1&lt;/td&gt;
        &lt;td class="myCell"&gt;
          cell
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td bgcolor="grey" class="myCell"&gt;Row2&lt;/td&gt;
        &lt;td class="myCell"&gt;
          cell
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td bgcolor="grey" class="myCell"&gt;Row3&lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
        &lt;td class="myCell"&gt;
          f
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>