将垂直线添加到底部css

Question

我在twitter-bootstrap中有一个响应表，我想知道是否可以将中心线添加到“ numberCircle ”的底部，如图所示：

谢谢

.numberCircle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: rgba(177, 207, 219, 1);
  color: white;
  text-align: center;
  line-height: 50px;
  font-weight: 600;
  font-size: 16px;
  margin: 10px 0;
}

<table class="col-md-12 table-condensed cf">
  <tbody>
    <tr>
      <td style="width: 50%; vertical-align: top;">
        <div class="title">Title Content</div>
        <div class="content">
          Quisque porta pulvinar urna, at maximus sapien efficitur ac. Suspendisse tristique blandit tortor eget congue. Nulla sed aliquet enim. Ut quis massa auctor, feugiat dui ut, molestie mi. Ut congue metus ac neque vestibulum, et pharetra neque mattis. Suspendisse
          sed purus commodo, sagittis justo non, pretium diam.
        </div>
      </td>
      <td class="text-center" style="width: 50%; vertical-align: top;">
        <div class="numberCircle">1</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用:after伪元素

＆＃13;

＆＃13;

.numberCircle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: rgba(177, 207, 219, 1);
  color: white;
  text-align: center;
  line-height: 50px;
  font-weight: 600;
  font-size: 16px;
  margin: 10px 0;
  position: relative;
}
.numberCircle:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 50px;
  width: 5px;
  background: red;
  transform: translate(-50%, 100%);
}

＆＃13;

<table class="col-md-12 table-condensed cf">
  <tbody>
    <tr>
      <td style="width: 50%; vertical-align: middle;">
        <div class="title">Title Content</div>
        <div class="content">
          Quisque porta pulvinar urna, at maximus sapien efficitur ac. Suspendisse tristique blandit tortor eget congue. Nulla sed aliquet enim. Ut quis massa auctor, feugiat dui ut, molestie mi. Ut congue metus ac neque vestibulum, et pharetra neque mattis. Suspendisse
          sed purus commodo, sagittis justo non, pretium diam.
        </div>
      </td>
      <td class="text-center" style="width: 50%; vertical-align: middle;">
        <div class="numberCircle">1</div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;