Dodaj pionową linię na dolnej css

Question

mam czułe stolik na Twitter-bootstrap i chcę wiedzieć, czy jest możliwe, aby dodać skoncentrowany linię do dołu „numberCircle” jak na obrazku:

Dziękuję

.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

Można użyć :after pseudo elementu

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