Q:

Add vertical line to bottom css

I have a responsive table in twitter-bootstrap and I want to know if is possible to add centered line to the bottom of the "numberCircle" like in the image:

Thank you

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

A:

You could use :after pseudo element

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

