html - 将垂直线添加到底部 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伪元素

.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%);
}

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