Dwa linii tła tekstu z cieniem

Question

To co Próbuję osiągnąć:

Ale nie mogę sprawić, że tło będzie tak długo, jak tekst, zachowując cień z całą zawartością ... ja po prostu tak:

Jak widać to sprawia, że ​​dwa cienie ... to jest mój znaczników i CSS:

<span class="interior_title">Samsung, HP Pop-Tops Do Double Duty <br>Rich Jaroslovsky</span> 

span.interior_title{ 
    background: #c7c7c9; 
    font-size: 50px; 
    color: #2f2f31; 
    width: 550px; 
    font-family: 'chaletcomprime'; 
    margin: 0 auto; 
    text-transform: uppercase; 
    line-height: 47px; 
    padding: 0px 15px; 
    margin-left: 90px; 
    -moz-box-shadow: 0 0 7px #000; 
    -webkit-box-shadow: 0 0 7px #000; 
    box-shadow: 0 0 7px #000; 
} 

Wszelkie pomysły, jak to zrobić?

Answer 1

Example

Jest blisko do tego, co chcesz. Zrobiłem to w ten sposób. Dwa elementy unoszą się w lewo pod drugim. Ten sam styl tylko szerokość jest inna.

<span class="one">Extra line here bal bal bal </span> 
<span class="two">Line TwoM<span> 

Teraz problem tutaj był dodatkowy cień, który rzucał na .two, naprawiłem, że za pomocą

.two:before{ 
    background: tan; 
    content: ""; 
    height: 10px; 
    left: 0; 
    position: absolute; 
    top: -10px; 
    width: 100%; } 

nie martw się o IE, ponieważ :before prace nad IE8 jak dla box-shadow to zatrzymuje się przy IE9.