CODEWITHSUNDEEP
htmlcss
shahista inamdar
shahista inamdar

Reputation: 186

Want to make text on top of everything using CSS

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 -

enter image description here

And current result is -

enter image description here

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.

Upvotes: 2

Views: 4901

Answers (4)

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

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 **/
}

Upvotes: 0

Thias
Thias

Reputation: 11

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>

Upvotes: 0

Paolo Forgia
Paolo Forgia

Reputation: 6748

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>

Upvotes: 1

Albzi
Albzi

Reputation: 15609

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.

Upvotes: 5

Related Questions