"Heading Text bottom border using css :child attributes"
Bootstrap 3.0.0 Snippet by msaevan

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12 root"> <h2 class="text-center"> Create your snippet's HTML <div class="border-root"> <div></div> <div></div> <div></div> </div> </h2> </div> </div> </div>
.root h2{ position:relative; padding-bottom:10px; } .root h2 div.border-root div{ position:absolute; bottom:0; height:5px; background:red; } .root h2 div.border-root div:first-child, .root h2 div.border-root div:last-child{ width:30px; } .root h2 div.border-root div:first-child{ left:0; } .root h2 div.border-root div:nth-child(2){ width:80px; left:0; right:0; margin:0 auto; } .root h2 div.border-root div:last-child{ right:0; } .root .border-root{ position: relative; width: 200px; margin: 0 auto; margin-top: 15px; }

Related: See More


Questions / Comments: