Can you target br with css

Question

Is it possible to target the line-break  lt br  gt  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

User · Answer

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

User · Answer

This will work  but only in IE   I tested it in IE8    br      border-bottom  1px dashed  000000    background-color   ffffff    display  block

User · Answer

this seems to solve the problem    lt  DOCTYPE html gt    lt style type  text css  gt   someContainer br   display none    someContainer br   a before   content      color  transparent  letter-spacing -100px  border-left  1px dashed black  margin 0 5px     lt  style gt    lt div id  someContainer  gt  lt a gt link lt  a gt  lt br   gt  lt a gt link lt  a gt  lt br   gt  lt a gt link lt  a gt  lt  div gt

User · Answer

old question but this is a pretty neat and clean fix  might come in use for people who are still wondering if it s possible     x000D   x000D  br  x000D      content       x000D      display  inline-block  x000D      width  100   x000D      border-bottom  1px dashed black  x000D    x000D   x000D   x000D    with this fix you can also remove BRs on websites   just set the width to 0px

User · Answer

Try the following  I put it together using Update 2 from another answer with high votes  and it worked perfectly for me   br     content   A   important      display  block  important      margin-bottom  1 5em  important

User · Answer

I placed a  lt br gt  tag into a  lt span gt  tag and was able to use display none  on the  lt span gt  to control when not to use the  lt br gt  tag using Media Queries

User · Answer

UPDATED 9 13 2019  The purpose of styling the  lt br gt  tag like this is to make a  quot bigger quot  line break  i e   with a bit of extra space between the lines   The  quot oldbig quot  class  below  was tested and worked properly in Chrome 66 0 3359 181  Firefox Quantum 60 0 2  Edge 42 17134 1 0 and IE 11 48 17134 0  to style  lt br gt   Unfortunately  it broke in Chrome version 76 and its derivatives  circa August 2019   The symptom is that the extra space between lines is no longer displayed  The  quot newbig quot  class is tested and working properly in current versions of Chrome  76 0 3809 132   Opera  Firefox  Edge  IE  Brave  and Palemoon  br oldbig  line-height 190  vertical-align top   br newbig  display block content  quot  quot  margin-top 0 5em line-height 190  vertical-align top    Here s a demo   x000D   x000D  br oldbig  line-height 175  vertical-align top   br newbig  display block content    margin-top 0 5em line-height 190  vertical-align top   x000D   lt p style  max-width 20em  gt This is a paragraph which demonstrates the difference   between a line-break which occurs when the text exceeds the max-width  and a   line-break forced by a  amp lt br amp gt  tag here  lt br gt   and a line break forced by a  amp lt br class oldbig amp gt  tag here  lt br class oldbig gt   and a line break forced by a  amp lt br class newbig amp gt  tag here  lt br class newbig gt   This is the next line after the  amp lt br class newbig amp gt  tag  but still   part of the same paragraph   lt  p gt   lt p style  max-width 20em  gt And this is another paragraph  entirely  lt  p gt  x000D   x000D   x000D   This is the result  displayed in Chrome v 76

User · Answer

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   lt script language  javascript  gt    document  ready function            br   append   lt span class  myclass  gt  lt  span gt          lt  script gt

User · Answer

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

User · Answer

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  amp  8  Firefox 2  3  amp  3 5B4  Safari 3  amp  4 for Windows  Opera 9 6  amp  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  lt br gt  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

User · Answer

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  lt  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

User · Answer

There is one good reason you would need to style a  lt br gt  tag   When it is part of code you don t want to  or can t  change and you want this particular  lt br gt  not to be displayed    xxx br  display none    Can save a lot of time and sometimes your day

User · Answer

br   padding  1px 8px  border-bottom  1px dashed  000     renders as below in IE8    not a lot of use in just one browser though      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      br   content        gives a dashed line in Chrome 2   Safari 4b but loses the line break which  unless anyone can come up with a way to reintroduce that  makes it less than useless   e g  IE8 test  Chrome Safari test and another

User · Answer

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

[html] Can you target <br /> with css?

Examples related to html

Examples related to css

Examples related to line-breaks