title: Styling a linebreak (<br>) inline with the text
body: <p>Is it possible to style and position a line break right after a text node inline?</p>
  
  <p>For example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>br {
      position:relative;
      display: block;
      border: 1px dotted green;
      font-size: 8px;
      line-height: 8px;
      height: 8px;
      background: yellow;  
      color: blue;
      content: "A";
      width: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;pre&gt;&lt;div contenteditable="true"&gt;
  some&lt;BR /&gt;text with&lt;BR /&gt;linebreaks.&lt;BR /&gt;The intended result&lt;BR /&gt;is to style the linbreak&lt;BR /&gt;right after the sentence.&lt;BR /&gt;
     &lt;/div&gt;
   &lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The result from this code snippet almost achieves what I'm looking for, but it positions the visual representation of the line break on the next line.</p>
  
  <p>The intended result is:</p>
  
  <pre><code>some"linebreak visual representation"
  text with"linebreak visual representation"
  linebreaks"linebreak visual representation"
  The intended result"linebreak visual representation"
  is to style the linebreak.."linebreak visual representation"
  </code></pre>
  
  <p>EDIT: A <a href="http://jsfiddle.net/vq7ckxq5/" rel="nofollow">fiddle</a></p>