Cacher is the code snippet organizer for pro developers

<h1 class="title"><span class="highlight" style="background: black">MathSpace</span></h1>

<p class="title"><span class="highlight">DEFAULT: This is how highlighted text usally wraps. It gets tight on the left and right edges.</span></p>

<p class="title"><span class="highlight highlight--wrapping">Good&#x205f;News!&#x205f;We&#x205f;can&#x205f;use&#x205f;CSS&#x205f;and&#x205f;Unicode&#x205f;to&#x205f;fix&#x205f;it...</span></p>

<p class="title title--js"><span class="highlight highlight--wrapping">Then get all "10x" and automate unicode with a tiny jQuery I call "MathSpace"</span></p>

.title {
  font: 36px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1em;
}
.title .highlight {
  display: inline;
  background: #ee4035;
  color: #fff;
  padding: 0.25em;
  padding-left: 0;
  padding-right: 0;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

html,
body {
  background: #ccc;
  text-align: left;
  padding: 3%;
}

h1.title {
  font-size: 3em;
}

http://codepen.io/fabien-d/pen/rHtal