Want to make text on top of everything using CSS - html

Question

Here is my html and CSS-
<style>
.bottom-border {
border-bottom-style: solid;
border-bottom-width: 2px;
color: #999;
margin-top: 0.1%;
margin-bottom: 1.5%;
}
.subheading {
position: relative;
padding-left: 0.5em;
padding-right: 0.5em;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
clear: both;
color: #666666;
z-index: 1000;
}
h1 {
text-align: center;
margin-bottom: -0.4em;
}
</style>
<div class="bottom-border">
<h1><span class="subheading" >Hello World</span></h1>
</div>
I want my text to look like -
And current result is -
I can achieve expected one by setting background-color to white of span but i want to know other way of doing that as it's not ideal way.

Answer 1

You can do it this way which doesn't use background colour.
.lines {
line-height: 0.5;
text-align: center;
}
.lines span {
display: inline-block;
position: relative;
}
.lines span:before,
.lines span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid red;
top: 0;
width: 300px;
}
.lines span:before {
right: 100%;
margin-right: 15px;
}
.lines span:after {
left: 100%;
margin-left: 15px;
}
<div class='lines'>
<span>This is some super long text how about that</span>
</div>
You will need to change the widths of the lines on either side though.

Answer 2

Just add a white background to your span
.bottom-border {
border-bottom-style: solid;
border-bottom-width: 2px;
color: #999;
margin-top: 0.1%;
margin-bottom: 1.5%;
}
.subheading {
background-color: white;
position: relative;
padding-left: 0.5em;
padding-right: 0.5em;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
clear: both;
color: #666666;
z-index: 1000;
}
h1 {
text-align: center;
margin-bottom: -0.4em;
}
<div class="bottom-border">
<h1><span class="subheading" >Hello World</span></h1>
</div>

Answer 3

I guess what you want to achieve is something like this
body {
font-family: 'Cinzel Decorative', cursive;
background: url(http://s.cdpn.io/3/blurry-blue.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
}
h1 {
font-size: 3em;
text-align: center;
}
.embiggen {
font-size: 4em;
text-shadow: 0 0 40px #ffbab3;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<h1>Main Title</h1>
<p class="subtitle fancy"><span>A fancy subtitle</span></p>

Answer 4

Update/Add following to your CSS
.subheading {
background:#fff;
padding-left:5px;
padding-right:5px; /** You can change padding value**/
}
Another way is, to use
h1 .subheading{
background:#fff;
position:relative;
}
h1:before{
content="";
width:50%;
height:1px;
background:#000;
position:absolute;
left:0;
top:50%;
}
h1:after{
content="";
width:50%;
height:1px;
background:#000;
position:absolute;
right:0;
top:50%;
/** USE CSS to Create left line **/
}