Can you target with css?

BR generates a line-break and it is only a line-break. As this element has no content, 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.

If you like to visually separate two sentences, then you probably want to use the horizontal ruler which is intended for this goal. Since you cannot change the markup, I’m afraid using only CSS you cannot achieve this.

It seems, it has been already discussed on other forums. Extract from Re: Setting the height of a BR element using CSS:

[T]his leads to a somewhat odd status
for BR in that on the one hand it is
not being treated as a normal element,
but instead as an instance of \A in
generated content, but on the other
hand it is being treated as a normal
element in that (a limited subset of)
CSS properties are being allowed on
it.

I also found a clarification in the CSS 1 specification (no higher level spec mentions it):

The current CSS1 properties and values cannot describe the behavior of
the ‘BR’ element. In HTML, the ‘BR’
element specifies a line break between
words. In effect, the element is
replaced by a line break. Future
versions of CSS may handle added and
replaced content, but CSS1-based
formatters must treat ‘BR’ specially.

Grant Wagner’s tests show that there is no way to style BR as you can do with other elements. There is also a site online where you can test the results in your browser.

Update

pelms made some further investigations, and pointed out that IE8 (on Win7) and Chrome 2/Safari 4b allows you to style BR somewhat. And indeed, I checked the IE demo page with IE Net Renderer’s IE8 engine, and it worked.

Update 2
c69 made some further investigations, and it turns out you can style the marker for br quite heavily (though, not cross-browser), yet this will not affect the line-break itself, because it seem to belong to parent container.

Leave a Comment