css - Double Line Behind Header Stops Working When Bootstrap Applied -
the stack overflow community helped me figure out how add 2 different sized lines behind section title on website. method can viewed in js fiddle: http://jsfiddle.net/dczr4/1/
it working properly, until included twitter bootstrap 3.0 css in layout. now, 2 lines appear right on top of each other, making 1 thick line behind text. can seen here: http://onedirectionconnection.com/tester/
if advice me on causing hiccup, appreciated.
the css header below:
.section-title{ font-family: 'lato', 'asap','quicksand', 'droid sans', sans-serif; position: relative; font-size: 30px; z-index: 1; overflow: hidden; text-transform: uppercase; text-align: center; } .section-title:before, .section-title:after { position: absolute; top: 40%; overflow: hidden; width: 50%; height: 4px; content: '\a0'; border-bottom: 3px solid #da5969; border-top: 1px solid #da5969; } .section-title:before { margin-left: -52%; text-align: right; } .section-title:after { margin-left:2%; text-align:left; }
and html is:
<div class="section-title">title goes here</div>
(in jsfiddle, defined h1, changed in layout)
thanks in advance offered!
bootstrap applies box-sizing: border-box
default.
you need reset box-sizing:content-box
particular requirement.
.section-title:before, .section-title:after { position: absolute; top: 40%; overflow: hidden; width: 50%; height: 4px; content: '\a0'; border-bottom: 3px solid #da5969; border-top: 1px solid #da5969; box-sizing: content-box; /* + vendor specific versions here */ }
Comments
Post a Comment