Can you target <br /> with css?

Question

Is it possible to target the line-break <br/> tag with CSS?

I would like to have a 1px dashed line every time there is a line-break. I am customising a site with my own CSS and cannot change the set HTML, otherwise I would use some other way.

I don't think it is possible but maybe there is a way someone knows about.

Answer 1

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.