Strikethrough Element Without Going Over or Under Element - html

Question

I want to draw lines to the left and right of an element up to the edge of their parent element.
I'm not sure how I could describe this otherwise, but maybe a screenshot will do the trick:
As you can see, this is close to perfect, and if I put
overflow: hidden;
on the heading, then its even better, but then I can't see my nice rounded corners (red circled parts in screenshot) because it's then cut-off.
At the moment, as is, this is my HTML:
<div id="IntroPage" class="introPage">
<div class="test">Heading</div>
</div>
Where "introPage" is the gray part you see.
My CSS for this:
.introPage {
position: relative;
max-width: 1000px;
margin: auto;
padding-top: 50px;
height: 100%;
background: gray;
}
.test {
position: relative;
/* overflow: hidden; */
text-align: center;
}
.test:before,
.test:after {
content: "";
position: relative;
background: #0099FF;
height: 6px;
display: inline-block;
width: 50%;
border-radius: 2px;
}
.test:before {
right: 10px;
margin-left: -50%;
}
.test:after {
left: 10px;
margin-right: -50%;
}
Anyone has a better solution to this?
Thanx in advance!

Answer 1

Here's a quick Fiddle
Sorry , I had to use 2 divs for the blue lines so they would cooperate with the hybrid layout: flexbox for modern browsers and display table for a fallback.
HTML
<div id="IntroPage" class="introPage flexBox">
<div class='line'></div>
<div class="test">
Heading
</div>
<div class='line'></div>
</div>
CSS
body {
background: grey;
}
.introPage {
position: relative;
width: 100%;
max-width: 100vw;
padding-top: 3em;
height: 100%;
background: gray;
display: table-row;
}
.test {
position: relative;
text-align: center;
width: 20%;
min-width: 1.5em;
display: table-cell;
font-variant: small-caps;
font-weight: 700;
font-size: 2em;
line-height: 2.5em;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 20%;
}
.line {
position: relative;
background: #0099FF;
height: .4em;
border-radius: 2px;
display: table-cell;
height: 6px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 39%;
}
.flexBox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
}

Answer 2

<style>
h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; }
h2 span { background:#fff; padding:0 10px; }
</style>
<h2><span>THIS IS A TEST</span></h2>
http://codepen.io/chriscoyier/pen/zDGkw

Answer 3

The quick and dirty way would be to set the width of the test before and after elements to a smaller width (Say maybe 40% instead of 50%).
.introPage {
position: relative;
max-width: 1000px;
margin: auto;
padding-top: 50px;
height: 100%;
background: gray;
}
.test {
position: relative;
/* overflow: hidden; */
text-align: center;
}
.test:before,
.test:after {
content: "";
position: relative;
background: #0099FF;
height: 6px;
display: inline-block;
width: 40%;
border-radius: 2px;
}
.test:before {
right: 10px;
}
.test:after {
left: 10px;
}
<div id="IntroPage" class="introPage">
<div class="test">Heading</div>
</div>
The best case solution would be to re-size the test before and after elements based on the width of the "test" class. I'm not so sure this is possible in css alone and you will likely have to use javascript to resize the width of those elements based on the size of the test element.
The basic outline of this process would be to calculate the width of the text, convert it from pixels to a percentage, then subtract that percentage from 100%, and divide by 2.
I may give this a shot later depending on how much time I have, if anyone wants to pick it up from here feel free to edit the post (community wiki style).

Answer 4

I think I have an answer...works with any page width.
http://codepen.io/anon/pen/ZGxNgB
<div id="IntroPage" class="introPage">
<div class="test">Heading</div>
</div>
.introPage {
position: relative;
max-width: 1000px;
margin: auto;
padding-top: 50px;
height: 100%;
background: gray;
}
.test {
position: relative;
/* overflow: hidden; */
text-align: center;
width:100%;
display:block;
height:30px;
}
.test:before,
.test:after {
content: "";
position: absolute;
background: #0099FF;
height: 6px;
display: inline-block;
width: 40px;
border-radius: 2px;
top:12px;
}
.test:before {
float:right;
right:-40px;
pos
}
.test:after {
float:left;
left:-40px;
}