CSS：关于：before和：after的问题

我对表格的样式设计有问题。我必须在屏幕上创建两行名片。这是我的标记：

<table id="contact-grid">
          <tr>
              <td class="left-box">
                  <div class="card shadow">
                      <div class="bar left"></div>
                      <img src="/images/content/winter-lab/contact-us/test.jpg" />
                      <div class="bio">
                          <h4>
                              ...
                          </h4>
                          <p>Direct: ...</p>
                          <p>Fax: ...</p>
                          <p>...</p>
                      </div>
                  </div>


              </td>
              <td class="divider">
                  &nbsp;
              </td>
              <td class="center-box">
                  &nbsp;

              </td>
              <td class="divider">
                  &nbsp;
              </td>
              <td class="right-box">
                  <div class="card shadow">
                      <div class="bar left"></div>
                      <img src="/images/content/winter-lab/contact-us/test2.jpg" />
                      <div class="bio">
                          <h4>
                              ...
                          </h4>
                          <p>...</p>
                          <p>...</p>
                          <p>...</p>
                      </div>
                  </div>

              </td>
          </tr>
</table>

---

长方体阴影仅应用于第二行。但奇怪的是。如果我转置这两行，那么方框阴影会出现在第二行，它以前是第一行。如果我创建第三行，第三行也会得到长方体阴影。但不是第一排。简而言之，无论第一行是什么，它都不会得到长方体阴影。这是怎么回事？我认为问题在于

:before

和

:after

伪元素，但我不确定，因为其他一切都正常工作。有人知道这是怎么回事吗？

这是一把小提琴，我在每个阴影项目周围添加了一个红色边框：我很难确定您希望最终产品是什么，我看到每张名片都有阴影在我的小提琴上。你试图完成的事情的视觉表现会很有帮助。

.shadow {
    position: relative;
}

.shadow:before, .shadow:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 0;
    width: 80%;
    top: 80%;
    max-width:400px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #111;
    -moz-box-shadow: 0 15px 10px #111;
    box-shadow: 0 15px 10px #111;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.shadow:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 0;
    left: auto;
}