Styling a linebreak (<br>) inline with the text

Is it possible to style and position a line break right after a text node inline?

For example:

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

<pre><div contenteditable="true">
some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
   </div>
 </pre>

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.

The intended result is:

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"

EDIT: A fiddle

Solution

This works with Chrome (other browsers not tested)...

br {
  display: inline;
  border: 1px dotted green;
  font-size: 8px;
  line-height: 8px;
  height: 8px;
  background: yellow;
  color: blue;
  content: "A";
  width: 15px;
}
br:after {
  content: " Hello! \a";
  white-space: pre;
}

<div contenteditable="true">some<BR />text with<BR />linebreaks.<BR />The intended result<BR />is to style the linbreak<BR />right after the sentence.<BR />
  </div>

But I strongly suggest you to read this Török's answer, it seems there is no way to customize the br tag for all browsers. The reason is that this element has no content, it * generates a line-break and it is only a line-break*. There are only few styles that make sense to apply on it, like clear or position. You can set BR's border but you won't see it as it has no visual dimension.

You'd better use something as the hr tag to achieve what you need.