Styling a linebreak (<br>) inline with the text
css, html, line-breaks
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.
Problem
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