Geek Answers Handbook

Add vertical line down

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

enter image description here

thanks

.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>
+6
source share
1 answer

You can use the alias :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>
+10
source

More articles:


All Articles