1

In reading this question, it appears that it used to not be possible to style the line break (BR) tag using CSS. However, with the latest browsers this is no longer the case. I'm trying to give certain line-breaks a visual appearance, the way old word processors would have a "show codes" mode where you could see the line break as a pi symbol.

However, I'm having trouble getting the effect to occur before the actual line break, it always seems to show up on the next line.

As an example, here is a fiddle. Even though I'm setting the content to occur before the line-break, it is still showing up on the next line. I need it to occur at the end of the line before the line-break actually occurs. I have also experimented with using background-image instead of content with no luck.

Community
  • 1
  • 1
Michael
  • 9,060
  • 14
  • 61
  • 123
  • 4
    While it may be possible to style `br` using CSS today, I still don't think you can rely on the results being consistent across browsers. – BoltClock Sep 17 '14 at 16:11
  • 1
    You should include the relevant code *in the question itself*. – Jukka K. Korpela Sep 17 '14 at 16:21
  • maybe the re-formatting of the actual "code" could help you with this: http://jsfiddle.net/w7gDE/297/ Also: `::before` and `::after` pseudo elements are not siblings of the element you used them on, they are children of them. – Nico O Sep 17 '14 at 16:27
  • If there is something outdated in the answers to the old question, they should be improved or new answers should be posted. Spawning new (vague) copies of essentially the same question is not useful. Besides, for new content, you should mostly not use `
    ` in the first place, so you should formulate the original question rather than ask about an assumed (inferior) approach to it.     – Jukka K. Korpela Sep 17 '14 at 16:28
  • @NicoO That actually appears to work! edit: oh, it's on P, not BR. – Michael Sep 17 '14 at 16:35
  • @JukkaK.Korpela Top answer here (http://stackoverflow.com/questions/462619/should-br-and-hr-be-avoided-at-all-costs-in-web-design) suggests that BR is in no way deprecated for new content. In any case, existing content must be supported. – Michael Sep 17 '14 at 16:39
  • Sorry to be pendantic, but the symbol you're referring to is a pilcrow, not pi – Stephan Muller Sep 18 '14 at 22:11
  • @StephanMuller So it is! TIL. – Michael Sep 19 '14 at 00:32

1 Answers1

0

First of all, if you look at the W3C spec for elements, it clearly states:

Void elements
   area, base, br, col, [...]

[...]

Void elements can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag).

However, you're trying to add a pseudo-element (:before) to it.

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.

This is problematic. In fact, it susprises me that your fiddle even works, and if anything I'd describe it as a bug in the browser's implementation of the spec. I can imagine it breaking in future version, so don't rely on your solution too much.

That said, here's the solution to your problem:

When you style the <br> as display:block it will naturally behave as a block element and start on a new line, together with the :before pseudo-element that it contains.

Keep your br on the same line as your text by leaving it an inline-element, and then add this to make the line-break occur after your icon:

br:after {
    content: ' ';
    display: block
}

This way it's only the :after pseudo-element that will show up on a new line, while the rest of the br still remains on the previous line.

jsFiddle

Note: does NOT work in FireFox. But then again, neither did your original code. In mine at least the double
's show up as an extra blank line, yours didn't

Community
  • 1
  • 1
Stephan Muller
  • 27,018
  • 16
  • 85
  • 126