Search code examples
csstextbackground

Background color for text (only)


I am wondering if it's posible to achieve this:

enter image description here

I mean, applying the background color just to the text instead of the whole block,

ej

<h1>WELLCOME TO RENTAL IN MALLORCA BEATYFULL COLLECTION OF APPARTMENTS</h1>

Is there a (cross browser, if possible) way to do this?


Solution

  • Yes. Add a <span> inside the <h1>, and apply the background colour and a line-height to it.

    h1 {
      width: 250px
    }
    
    h1>span {
      background-color: yellow;
      line-height: 2
    }
    <h1><span>Testing, testing, this is a really long piece of text blah blah blah Hi there!</span></h1>