Coder Perfect

Is it possible to use CSS to target br />?

Category: html

Tag: , ,

Problem

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

Every time a line-break occurs, I’d like a 1px dashed line to appear. I’m customizing a website with my own CSS and can’t change the default HTML; else, I’d go another route.

I don’t believe it is conceivable, but perhaps there is a way that someone is aware of.

Asked by dc3

Solution #1

A line-break is generated by BR, and it is merely a line-break. Because this element has no content, only a few styles, such as clear and position, are appropriate to use on it. You can customize BR’s border, but you won’t be able to see it because it lacks visual dimension.

If you wish to visually separate two sentences, you should definitely use the horizontal ruler, which is specifically designed for this purpose. Because you can’t change the markup, I’m afraid you won’t be able to achieve this using just CSS.

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

I also discovered a clarification in the CSS 1 specification (which is not included in any higher-level spec):

According to Grant Wagner’s tests, there is no way to style BR like you can with other elements. You can also test the results in your browser on an internet site.

Update

pelms did some further digging and discovered that IE8 (on Windows 7) and Chrome 2/Safari 4b allow you to customize BR to some extent. I tested the IE demo page using the IE8 engine in IE Net Renderer, and it worked.

Update 2 c69 did some more research and discovered that you may style the marker for br quite heavily (though not cross-browser), but this will have no effect on the line-break itself, as it appears to belong to the parent container.

Answered by viam0Zah

Solution #2

Try this: I put it together using Update 2 from another popular solution, and it worked great for me:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Answered by Rok

Solution #3

There is one valid reason why you might want to customize a br> tag.

When it’s part of code you don’t want to (or can’t) update, and you don’t want this particular br> to appear.

.xxx br {display:none}

Can help you save a lot of time and even your entire day.

Answered by Bernard Sfez

Solution #4

For the benefit of any future visitors who may have missed my remarks, I’ve included the following:

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

does not work.

It was tested in Internet Explorer 6, 7, and 8, Firefox 2, 3, and 3.5B4, Safari 3 and 4 for Windows, Opera 9.6 and 10 (alpha), and Google Chrome (version 2), and none of them worked. Please feel free to update this list if someone discovers a browser that does allow a border on a br> element in the future.

Also, keep in mind that I tried a few 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);
}

The following is compatible with Opera 9.6 and 10 (alpha) (thanks porneL!):

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

It’s not very useful if it’s only supported by one browser, but I always enjoy seeing how different browsers implement the specification.

Answered by Grant Wagner

Solution #5

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

In Internet Explorer 8, it looks like this… not a lot of use in just one browser.

(N.B. I’m using IE 8.0.7100 (on Win7 RC) if that makes any difference)

Also,

br:after { content: "..." }  
br { content: "" }`

or,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

“” in the content: “” in the content: “” in the content: “” in the content: “

offers a dashed line in Chrome 2 / Safari 4b but loses the line break, making it less than useful until someone can figure out how to reintroduce it.

For example, an IE8 test, a Chrome/Safari test, and so on.

Answered by pelms

Post is based on https://stackoverflow.com/questions/899252/can-you-target-br-with-css