How to remove backgound white when horizontal line with words in the middle

Question

Please tell me how to remove background white color and worked horizontal line with words in the middle with css.

This is my code please check.

.asses {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #b7d9eb;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

.asses span {
    background: #fff;
    padding: 0 10px;
    font-size: 43px;
    font-family: 'lato';
    color: #555555;
}

<h2 class="asses">
    <span>My TEXT HERE</span>
</h2>

So now please tell me how to solve that issue

yes it's worked because in this text background color white but i didn't want white because in my website backgound image is colorful that's why is this any trick to transparent and run like that. Thanks — , May 09 '18 at 12:15
if you want to remove the background color then you have to use before after and give width them accordingly. — Chilll007, May 09 '18 at 12:15
check all the answer of the duplicate, not only the accpeted one especially the second one — Temani Afif, May 09 '18 at 12:16
your answer is marked as duplicate so cant answer your question you can https://jsfiddle.net/y9qg6d04/ use this as referance. — Chilll007, May 09 '18 at 12:26

Gautam Naik · Answer 1 · 2018-05-09T12:25:56.110

2

Try this

h2 {
  font: 33px sans-serif;
  margin-top: 30px;
  text-align: center;
  text-transform: uppercase;
}


h2.asses {
  position: relative;
  overflow: hidden;
}

h2.asses span {
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  position: relative;
  padding: 0 20px;
}

h2.asses span:before,
h2.asses span:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px solid red;
}

h2.asses span:before {
  right: 100%;
}

h2.asses span:after {
  left: 100%;
}

<h2 class="asses"><span>My TEXT HERE</span></h2>

Refer this link Line behind text for more examples

edited May 09 '18 at 12:25

answered May 09 '18 at 12:16

Gautam Naik

8,990
3
27
42

Yeah this is i want will you please make this on my code please thanks – May 09 '18 at 12:22
Your code is really awesome please make this on code. thanks – May 09 '18 at 12:25
@ahhh , check the code now – Gautam Naik May 09 '18 at 12:27
@ahhh if its working for u, then accept my answer – Gautam Naik May 10 '18 at 17:56

How to remove backgound white when horizontal line with words in the middle

1 Answers1