How to neatly style a text background with CSS

I was trying to create a transparent text background and the background should fill whatever you want.

If I use display:inline-block

then both lines have the same background width, so there is no background effect filling the text, which is not what I am trying to achieve.

hitting on top of each other can be corrected by increasing the line height or setting the line height normal

, but this creates a huge gap between the lines. Well, I would like both lines to be very close. which in this case has a line-height of 55px with a font-size of 47px.

The markup is here:

.main {
  width: 500px;
  margin: 100px auto;
  background: green;
  padding: 30px;
}
.test {
  width: 450px;
}
.main h2 {
  color: #ffffff;
  font-size: 47px;
  line-height: 55px;
}
.main h2 span {
  background: rgba(0, 0, 0, 0.2);
}
      

        
        
        
      

    

<div class="main">
  <div class="test">
    <h2><span>A title about your dream kitchen</span></h2>
    <a href="">Read MOre</a>

  </div>
</div>
      

        
        
        
      

    

Check out the jsfiddle: http://jsfiddle.net/srmahmud2/ze4kpmuy/

Not sure if I can make you understand or not. here's a screenshot for a quick look http://postimg.org/image/efnmpoiy1/