Fix problem caused by two .highlight elements (#1421)

For some reason the highlighter output:

<div class="highlight">
  <pre class="highlight">
    <!-- ... -->
  </pre>
</div>

which causes all styles with the selector `.highlight` to be applied on
both. Most of them don't have a visible impact, except the one which
adds a pseudo-element. This is now fixed by specifying the element.

public/css/playground.css

@@ -352,7 +352,7 @@ small code,li code,p code {
     text-align: right;
 }
 
-.highlight:after {
+div.highlight:after {
     position: absolute;
     top: 0;
     right: 0;