CodePen

HTML

            
              <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>


            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $pad-wide: 20px;
$color-red: #ee4035;
$color-white: #fff;
$title-pad: 0.25em;
$title-lineheight: $title-pad + 1;

.title {
  font: 36px/1.25 Ubuntu, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1em;
  
  .highlight {
    display: inline;
    background: $color-red;
    color: $color-white; 
    padding: $title-pad;
    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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................