Expand pre Background

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>

:before擬似要素と:after擬似要素でpre要素の左右にそれと同じ高さのブロックを作成し背景を同じ色で塗りつぶす(ここではわかりやすいように色を変えてある)ことによって左右に飛び出したデザインを幅固定でも実現できる。