Can you target <br /> with css?

Applying custom styles

Targeting the untouchables

Although CSS primarily styles visible elements, there's limited scope for <br /> element targeting. Visibility control is one such technique:

br { display: none; } /* Whooosh! Just like my salary at month-end */


Remember, using display: none; takes the element out of the page flow, effectively turning the line break into a line-join.

Dealing with browser quirks

Some older browsers like IE8 or Chrome 2 / Safari 4b add another dimension to styling. They permit some limited styling to <br /> tags:

br { color: red; } /* Might work, might not... also, do you want a red line break? */


This isn't consistent and can be a bit hit or miss. You wouldn't want to bet your salary on that, would you?

Clever workarounds

Adding your flair

Pseudo-elements like ::after can be your best friend when applying custom content after a <br />, if you can handle the occasional cold shoulder:

br:after { content: " - "; color: blue; } /* The "-" is a lie, I swear */


This technique can inject an extra dose of personality like styling or additional info. Just remember, use your powers responsibly!

Bordering on styling

Some browsers, mostly the cultured ones like Opera 9.6/10, recognize border tricks on br:after:

br:after { content: ""; border-bottom: 1px solid black; display: inline-block; width: 100%; }
/* Now all my line breaks have a mustache */


Remember though, some of your friends might not appreciate this fine taste of yours (meaning, there are browser compatibility issues).

Troubleshooting and extra tips

The "!important" safety net

To ensure the CSS rules for <br> tag stick like gum under your desk, use !important to override conflicting styles:

br::after { content: " "; margin-bottom: 10px !important; } /* Don't try this at home... or do you? */


Beyond <br />

If you seek a more visually distinct separation than line breaks, consider cheating on <br /> with <hr>:

<p>First section</p>
<hr/>
<p>Second section</p>


An <hr> tag allows more extensive styling, bringing some life to the party (i.e. your webpage).