Can you target <br /> with css?

Question

Hi, wondering if anyone knows if it is possible to target line-break tag with css. Basically all I want to do is 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. - Thanks!

Answer 1

BR is an inline element, not a block element.

So, you need:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

Otherwise, browsers that are a little pickier about such things will refuse to apply borders to your BR elements, since inline elements don't have borders, padding, or margins.

Answer 2

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.

Answer 3

For the benefit of any future visitors who may have missed my comments:

br {
    border-bottom:1px dashed black;
}

does not work.

It has been tested in IE 6, 7 & 8, Firefox 2, 3 & 3.5B4, Safari 3 & 4 for Windows, Opera 9.6 & 10 (alpha) and Google Chrome (version 2) and it didn't work in any of them. If at some point in the future someone finds a browser that does support a border on a <br> element, please feel free to update this list.

Also note that I tried a number of other things:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Of those, the following does works in Opera 9.6 and 10 (alpha) (thanks porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Not very useful when it is only supported in one browser, but I always find it interesting to see how different browsers implement the specification.

Answer 4

I know you can't edit the HTML, but if you can modify the CSS, can you add javascript?

if so, you can include jquery, then you could do

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});

Answer 5

This will work, but only in IE. I tested it in IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

Answer 6

My own tests conclusively show that br tags do not like to be targeted for css.

But if you can add style then you can probably also add a scrip tag to the header of the page? Link to an external .js that does something like this:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

So in short, it's not optimal, but here is my solution.

Answer 7

Why not just use the HR tag? It's made exactly for what you want. Kinda like trying to make a fork for eating soup when there's a spoon right in front of you on the table.