Is it possible to create box-shadow effect for inline text?

Question

I want to create this effect:

Is there a way to do this via CSS/JS?

Answer 1

There is another, similar way of doing it that only requires a small amount of javascript. Similar to the answer above, but places all the styling in the CSS rather than inline elements

(Couldn't get the SO code editor to work)

http://jsbin.com/mohuti/1/edit?html,css,js,output

This is a demonstration of how to have a multiline padded background color on any amount of text. enjoy

h1 {
  margin: 0 !important;
  clear: both;
  overflow: hidden;
  padding-left: 20px;
  position: relative;
}

h1:before {
  content: '';
  width: 20px;
  left: 0;
  height: 100%;
  background: #333333;
  position: absolute;
}

h1 span {
  position: relative;
  float: left;
  background: #333333;
  color: #ffffff;
  padding: 10px 30px 10px 0;
  font-size: 80px;
  line-height: 1em;
  letter-spacing: -2px;
}

// Pure JS

var foo = document.getElementById("heading");
foo.innerHTML = foo.innerText.replace(/\S+/g, function (word) {
    return "" + word + "";
});


// jQuery
var words = $("h1").text().split(" ");
$("h1").empty();
$.each(words, function(i, v) {
    $("h1").append($("").text(v));
});