Menu
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>
814
You can use the horizontal rule tag to create vertical lines. By using minimal width and large size, horizontal rule becomes a vertical one.
To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line. Example 1: It creates a vertical line using border-left, height and position property.
You can use <hr> , as it is semantically correct, and then use CSS to convert it to a vertical line.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
